<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>javascript笔记总结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="JavaScript,">
  

  <meta name="description" content="转载请声明出处 博客原文  随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧 第一课时 入门基础 知识点：  操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="javascript笔记总结篇">
<meta property="og:url" content="http://blog.poetries.top/2016/09/24/javascript笔记基础总结篇/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="转载请声明出处 博客原文  随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧 第一课时 入门基础 知识点：  操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-1a17ccd9b4577254.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-3a4d0eba77f1a163.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-80fe8bcddfbca269.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-ce659f11e978cd3b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-d7b1dc1194558ac0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-32121bca4ab77dba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f8c6735fdc8d7ee0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-54d5b8e92e0266af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-0d7c71a08e5c3dd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f6fab5bf39d4927a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-960b48ae2a258f3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-46a363299f4cb52d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-5c2c02e45b6a34bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-21688edeab3bb10d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-fc562b41d866cae5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f53b3e2d9833f545.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-ccbf4ddf8ea86e17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-724c8ddd463e8497.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-b006171464fb7c9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-57f3858765368446.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-fc1f9e36ede219f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-55110b7283224dde.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-a45122592360a214.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-b832f7372de9dc35.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://github.com/poetries/TZ-Front-End-Note/raw/master/JS-Basic-star/images/DOM7.png">
<meta property="og:image" content="https://github.com/poetries/TZ-Front-End-Note/raw/master/JS-Basic-star/images/DOM8.png">
<meta property="og:image" content="https://github.com/poetries/TZ-Front-End-Note/raw/master/JS-Basic-star/images/DOM9.png">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-9d8603509767ea7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-44bd5c0bf459b4d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-17266c52ca52c896.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-1bf8c506d61084c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-4c5426128f64acff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-588f28213506abe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-6828aabba7d2948e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-f4f9ade4c089cabd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-8b133694198ad13f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-7848f738f43affba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://github.com/phodal/developer/raw/master/images/js.gif">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-3a584567c41f737d.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-7de04acbf81543fc.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-5737bc8360e9e8d3.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-44d4ba1c8f6d48a6.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-05b7f79120cc6150.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-1b25cf62140a30fb.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-30e2e0981d225fd4.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-8bdb24d940eceeea.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-caa897f33ef0e47d.gif?imageMogr2/auto-orient/strip">
<meta property="og:image" content="http://upload-images.jianshu.io/upload_images/1480597-eb23ab7b14608e83.gif?imageMogr2/auto-orient/strip">
<meta property="og:updated_time" content="2020-08-15T04:25:31.922Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="javascript笔记总结篇">
<meta name="twitter:description" content="转载请声明出处 博客原文  随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧 第一课时 入门基础 知识点：  操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制">
<meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/1480597-1a17ccd9b4577254.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#第一课时-入门基础"><span class="toc-text">第一课时 入门基础</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点："><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1、javascript介绍"><span class="toc-text">1、javascript介绍</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、基于对象的内存管理"><span class="toc-text">2、基于对象的内存管理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3、变量"><span class="toc-text">3、变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM在内存中的一些图示"><span class="toc-text">DOM在内存中的一些图示</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第二课时"><span class="toc-text">第二课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#回顾上节："><span class="toc-text">回顾上节：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-1"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1、window作用域"><span class="toc-text">1、window作用域</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、数据类型"><span class="toc-text">2、数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#如何判断js中的数据类型："><span class="toc-text">如何判断js中的数据类型：</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#最常见的判断方法：typeof"><span class="toc-text">最常见的判断方法：typeof</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#判断已知对象类型的方法：instanceof"><span class="toc-text">判断已知对象类型的方法：instanceof</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#根据对象的constructor判断：constructor"><span class="toc-text">根据对象的constructor判断：constructor</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#通用但很繁琐的方法：-prototype"><span class="toc-text">通用但很繁琐的方法： prototype</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Javascript的数据类型有六种（ES6新增了第七种Symbol）"><span class="toc-text">Javascript的数据类型有六种（ES6新增了第七种Symbol）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#内存中一共分为几种对象："><span class="toc-text">内存中一共分为几种对象：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#数据类型转换"><span class="toc-text">数据类型转换</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#转换函数"><span class="toc-text">转换函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#强制类型转换"><span class="toc-text">强制类型转换</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#隐式转换"><span class="toc-text">隐式转换</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#null和undefined"><span class="toc-text">null和undefined</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3、javascript脚本执行顺序"><span class="toc-text">3、javascript脚本执行顺序</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#总结一下-运算的规则：-隐式转换"><span class="toc-text">总结一下==运算的规则：(隐式转换)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第三课时"><span class="toc-text">第三课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾："><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-2"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1、运算符"><span class="toc-text">1、运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#条件运符-表达式1-表达式2-表达式3-三元运算符"><span class="toc-text">条件运符(表达式1?表达式2:表达式3)三元运算符</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、在js中-有四种被认为是非："><span class="toc-text">2、在js中 有四种被认为是非：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第四课时"><span class="toc-text">第四课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-1"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-3"><span class="toc-text">知识点：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1、console-log调试程序"><span class="toc-text">1、console.log调试程序</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、条件结构"><span class="toc-text">2、条件结构</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#javascript中if语句优化写法"><span class="toc-text">javascript中if语句优化写法</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第五课时"><span class="toc-text">第五课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-2"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-4"><span class="toc-text">知识点：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1、switch"><span class="toc-text">1、switch</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、for"><span class="toc-text">2、for</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第六课时"><span class="toc-text">第六课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-3"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-5"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1、while-do-while-没有谁好谁坏-只有适应场景不同"><span class="toc-text">1、while/do...while 没有谁好谁坏 只有适应场景不同</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、代码内存解析"><span class="toc-text">2、代码内存解析</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#闭包"><span class="toc-text">闭包</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#闭包-作用域"><span class="toc-text">闭包 作用域</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4、object对象"><span class="toc-text">4、object对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5、面向对象的程序设计"><span class="toc-text">5、面向对象的程序设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#一些内存图示"><span class="toc-text">一些内存图示</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#原型链的几张图解"><span class="toc-text">原型链的几张图解</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第七课时"><span class="toc-text">第七课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-4"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-6"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1、object对象"><span class="toc-text">1、object对象</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#new-原理详细解析"><span class="toc-text">new 原理详细解析</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#new创建对象的步骤"><span class="toc-text">new创建对象的步骤</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2、面向对象的程序设计"><span class="toc-text">2、面向对象的程序设计</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#多种构造函数"><span class="toc-text">多种构造函数</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#传统的创建对象"><span class="toc-text">传统的创建对象</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#工厂模式"><span class="toc-text">工厂模式</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#构造函数"><span class="toc-text">构造函数</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#原型模式"><span class="toc-text">原型模式</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#简单原型模式"><span class="toc-text">简单原型模式</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#构造函数和原型模式"><span class="toc-text">构造函数和原型模式</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#动态原型模式"><span class="toc-text">动态原型模式</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#稳妥构造函数"><span class="toc-text">稳妥构造函数</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#其他："><span class="toc-text">其他：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#一些内存图示-1"><span class="toc-text">一些内存图示</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第八课时"><span class="toc-text">第八课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-5"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-object对象"><span class="toc-text">1.object对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-面向对象的程序设计"><span class="toc-text">2.面向对象的程序设计</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-7"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-prototype内存解析"><span class="toc-text">1.prototype内存解析</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-通过prototype扩展功能"><span class="toc-text">2.通过prototype扩展功能</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#一些内存图示-2"><span class="toc-text">一些内存图示</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第九课时"><span class="toc-text">第九课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#回顾："><span class="toc-text">回顾：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1、prototype内存解析"><span class="toc-text">1、prototype内存解析</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2、通过prototype扩展功能"><span class="toc-text">2、通过prototype扩展功能</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3、封装"><span class="toc-text">3、封装</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-8"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#一些内存图示-3"><span class="toc-text">一些内存图示</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第十课时"><span class="toc-text">第十课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-6"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-继承"><span class="toc-text">1.继承</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-call-apply方法的使用"><span class="toc-text">2.call apply方法的使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-9"><span class="toc-text">知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#API-application-program-interface"><span class="toc-text">API application program interface</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#常用API"><span class="toc-text">常用API</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#日期型函数Date"><span class="toc-text">日期型函数Date</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#字符串String型函数API"><span class="toc-text">字符串String型函数API</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#Math对象型"><span class="toc-text">Math对象型</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#Number型-常用的数字函数"><span class="toc-text">Number型 常用的数字函数</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-Regex"><span class="toc-text">5.Regex</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#一些图示"><span class="toc-text">一些图示</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第十一课时"><span class="toc-text">第十一课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-7"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#知识点：-10"><span class="toc-text">知识点：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第十二课时"><span class="toc-text">第十二课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-8"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#新知识点："><span class="toc-text">新知识点：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第十三课时"><span class="toc-text">第十三课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-9"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#新知识："><span class="toc-text">新知识：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-BOM-浏览器对象模型"><span class="toc-text">1.BOM 浏览器对象模型</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-DOM-文档对象模型"><span class="toc-text">2.DOM 文档对象模型</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第十四课时"><span class="toc-text">第十四课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-10"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#新知识点：-1"><span class="toc-text">新知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-DOM-文档对象模型"><span class="toc-text">1.DOM 文档对象模型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#document"><span class="toc-text">document</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#element"><span class="toc-text">element</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM-操作："><span class="toc-text">DOM 操作：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#操作DOM对象："><span class="toc-text">操作DOM对象：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#节点的查找：（最重要）"><span class="toc-text">节点的查找：（最重要）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM中查找节点的思路：（由大到小-个别情况-由子到父）"><span class="toc-text">DOM中查找节点的思路：（由大到小 个别情况 由子到父）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#继续查找："><span class="toc-text">继续查找：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM与节点的关系："><span class="toc-text">DOM与节点的关系：</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#DOM属性小结"><span class="toc-text">DOM属性小结</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#DOM方法小结"><span class="toc-text">DOM方法小结</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#第十五课时"><span class="toc-text">第十五课时</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#上节回顾：-11"><span class="toc-text">上节回顾：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-DOM-文档对象模型-1"><span class="toc-text">1.DOM 文档对象模型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#document-1"><span class="toc-text">document</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#新知识点：-2"><span class="toc-text">新知识点：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-事件（事故）基础"><span class="toc-text">1.事件（事故）基础</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-常用事件"><span class="toc-text">2.常用事件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#浏览器事件注意事项："><span class="toc-text">浏览器事件注意事项：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#总结"><span class="toc-text">总结</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js一些资料推荐"><span class="toc-text">js一些资料推荐</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#附录一份大神总结的关于js的导图"><span class="toc-text">附录一份大神总结的关于js的导图</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-javascript笔记基础总结篇" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">javascript笔记总结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.09.24</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 13.2k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 53分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>转载请声明出处 <a href="http://blog.poetries.top/2016/09/24/javascript%E7%AC%94%E8%AE%B0%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E7%AF%87/#more">博客原文</a></p>
</blockquote>
<p>随手翻阅以前的学习笔记，顺便整理一下放在这里，方便自己复习，也希望你有也有帮助吧</p>
<h3 id="第一课时-入门基础"><a href="#第一课时-入门基础" class="headerlink" title="第一课时 入门基础"></a>第一课时 入门基础</h3><hr>
<h4 id="知识点："><a href="#知识点：" class="headerlink" title="知识点："></a><strong>知识点</strong>：</h4><hr>
<ul>
<li>操作系统就是个应用程序</li>
<li>只要是应用程序都要占用物理内存</li>
<li>浏览器本身也是一个应用程序</li>
<li>浏览器本身只懂得解析<code>HTML</code></li>
<li>调用浏览器这个应用程序的一个功能绘制<a id="more"></a>
<h4 id="1、javascript介绍"><a href="#1、javascript介绍" class="headerlink" title="1、javascript介绍"></a>1、javascript介绍</h4></li>
</ul>
<hr>
<ul>
<li><p><code>JavaScript</code>操作<code>DOM</code>的本质是=获取+触发+改变</p>
</li>
<li><p>目的：就是用来操作内存中的<code>DOM</code>节点</p>
<ul>
<li>修改<code>DOM</code>节点的属性</li>
<li>过<code>javascript</code>语法组织逻辑代码操作DOM</li>
<li><code>BOM(window)</code>它包含了<code>DOM</code></li>
<li><code>DOM(document)</code></li>
<li><code>script</code>脚本推荐放在最下边好处：防止因网络问题，页面加载时间长，出现空白；即便网络问题，浏览器也把<code>DOM</code>加载渲染完成，等待从服务端下载完<code>js</code>脚本，出现效果</li>
<li><code>css</code>不放在最下面原因通俗地讲：好比先穿好衣服在出去，浏览器先把<code>css</code>样式准备好，在加载结构层，使得页面有样子；如果放在下面，因为页面是从上往下加载，没有<code>css</code>，就剩下裸露的标签，很难看，使得用户体验不好</li>
</ul>
</li>
</ul>
<h4 id="2、基于对象的内存管理"><a href="#2、基于对象的内存管理" class="headerlink" title="2、基于对象的内存管理"></a>2、基于对象的内存管理</h4><hr>
<ul>
<li><code>javascript</code>就是来操作这些对象<ul>
<li>通过逻辑组织对象之间的关系和行为</li>
<li>如何操作这些对象？通过变量引用</li>
</ul>
</li>
</ul>
<h4 id="3、变量"><a href="#3、变量" class="headerlink" title="3、变量"></a>3、变量</h4><hr>
<ul>
<li>变量本质是一个空盒子，里面记录了一个内存地址，使能找到内存中的对象，保存了指向具体的实在的东西的地址</li>
<li>变量存在栈中，对象存在堆中</li>
<li>变量的意义：方便我们去操作对象</li>
<li>变量的几种引用方式<ul>
<li>指针（<code>C</code>语言中叫法）</li>
<li>引用（<code>Java</code>）</li>
<li>变量</li>
</ul>
</li>
<li>例如：<ul>
<li><code>var b = document.body</code> 含义：把<code>body</code>这个对象在内存中的地址放到b变量里面，变量<code>b</code>（<code>b</code>是内存地址的别名）本身也存在内存中，以后的操作是针对<code>body</code>这个地址</li>
</ul>
</li>
</ul>
<ul>
<li>变量命名规范<ul>
<li>由字母(<code>a-zA-Z</code>)数字(<code>0-9</code>)下划线(<code>_</code>)以及美元符号(<code>$</code>)</li>
<li>不能由数字开头</li>
<li>命名尽量用英文并且具有一定的含义</li>
<li>如果有多个英文单词,后面单词的首字母大写</li>
<li>不能使用关键字</li>
<li>首字母不要大写，大写是有特殊含义的</li>
</ul>
</li>
</ul>
<h4 id="DOM在内存中的一些图示"><a href="#DOM在内存中的一些图示" class="headerlink" title="DOM在内存中的一些图示"></a>DOM在内存中的一些图示</h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-1a17ccd9b4577254.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="DOM Tree"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-3a4d0eba77f1a163.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="DOM内存图"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-80fe8bcddfbca269.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="DOM内存图"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-ce659f11e978cd3b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="DOM内存图"></p>
<h3 id="第二课时"><a href="#第二课时" class="headerlink" title="第二课时"></a>第二课时</h3><hr>
<h4 id="回顾上节："><a href="#回顾上节：" class="headerlink" title="回顾上节："></a>回顾上节：</h4><ul>
<li><p>1、<code>javascript</code>介绍</p>
</li>
<li><p>2、基于对象的内存管理</p>
</li>
<li><p><code>javascript</code>就是来操作这些对象</p>
<ul>
<li>通过逻辑组织对象之间的关系和行为</li>
<li>如何操作这些对象？通过变量引用</li>
</ul>
</li>
<li>3、变量</li>
</ul>
<h4 id="知识点：-1"><a href="#知识点：-1" class="headerlink" title="知识点："></a><strong>知识点</strong>：</h4><hr>
<h4 id="1、window作用域"><a href="#1、window作用域" class="headerlink" title="1、window作用域"></a>1、<code>window</code>作用域</h4><hr>
<ul>
<li>只要在<code>script</code>标签中定义的变量，默认就在<code>window</code>的作用域之下</li>
<li>默认就是<code>window</code>这个对象里面写代码</li>
</ul>
<h4 id="2、数据类型"><a href="#2、数据类型" class="headerlink" title="2、数据类型"></a>2、数据类型</h4><hr>
<h5 id="如何判断js中的数据类型："><a href="#如何判断js中的数据类型：" class="headerlink" title="如何判断js中的数据类型："></a>如何判断js中的数据类型：</h5><hr>
<ul>
<li><p><code>typeof</code>、<code>instanceof</code>、 <code>constructor</code>、 <code>prototype</code>方法比较</p>
</li>
<li><p>如何判断<code>js</code>中的类型呢，先举几个例子：</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="string">"iamstring."</span>;</span><br><span class="line"><span class="keyword">var</span> b = <span class="number">222</span>;</span><br><span class="line"><span class="keyword">var</span> c= [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="keyword">var</span> e = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;alert(<span class="number">111</span>);&#125;;</span><br><span class="line"><span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="keyword">this</span>.name=<span class="string">"22"</span>;&#125;;</span><br></pre></td></tr></table></figure>
<h6 id="最常见的判断方法：typeof"><a href="#最常见的判断方法：typeof" class="headerlink" title="最常见的判断方法：typeof"></a><strong>最常见的判断方法</strong>：<code>typeof</code></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">alert(<span class="keyword">typeof</span> a)   ------------&gt; string</span><br><span class="line">alert(<span class="keyword">typeof</span> b)   ------------&gt; number</span><br><span class="line">alert(<span class="keyword">typeof</span> c)   ------------&gt; object</span><br><span class="line">alert(<span class="keyword">typeof</span> d)   ------------&gt; object</span><br><span class="line">alert(<span class="keyword">typeof</span> e)   ------------&gt; <span class="function"><span class="keyword">function</span></span></span><br><span class="line"><span class="function"><span class="title">alert</span>(<span class="params">typeof f</span>)   ------------&gt; <span class="title">function</span></span></span><br></pre></td></tr></table></figure>
<ul>
<li>其中<code>typeof</code>返回的类型都是字符串形式，需注意，例如：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">alert(<span class="keyword">typeof</span> a == <span class="string">"string"</span>) -------------&gt; <span class="literal">true</span></span><br><span class="line">alert(<span class="keyword">typeof</span> a == <span class="built_in">String</span>) ---------------&gt; <span class="literal">false</span></span><br></pre></td></tr></table></figure>
<ul>
<li>另外<code>typeof</code>可以判断<code>function</code>的类型；在判断除<code>Object</code>类型的对象时比较方便。</li>
</ul>
<h6 id="判断已知对象类型的方法：instanceof"><a href="#判断已知对象类型的方法：instanceof" class="headerlink" title="判断已知对象类型的方法：instanceof"></a><strong>判断已知对象类型的方法</strong>：<code>instanceof</code></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">alert(c <span class="keyword">instanceof</span> <span class="built_in">Array</span>) ---------------&gt; <span class="literal">true</span></span><br><span class="line">alert(d <span class="keyword">instanceof</span> <span class="built_in">Date</span>) </span><br><span class="line">alert(f <span class="keyword">instanceof</span> <span class="built_in">Function</span>) ------------&gt; <span class="literal">true</span></span><br><span class="line">alert(f <span class="keyword">instanceof</span> <span class="function"><span class="keyword">function</span>) ------------&gt; <span class="title">false</span></span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>注意</strong>：<code>instanceof</code>后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。</li>
</ul>
<h6 id="根据对象的constructor判断：constructor"><a href="#根据对象的constructor判断：constructor" class="headerlink" title="根据对象的constructor判断：constructor"></a><strong>根据对象的<code>constructor</code>判断</strong>：<code>constructor</code></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">alert(c.constructor === <span class="built_in">Array</span>) ----------&gt; <span class="literal">true</span></span><br><span class="line">alert(d.constructor === <span class="built_in">Date</span>) -----------&gt; <span class="literal">true</span></span><br><span class="line">alert(e.constructor === <span class="built_in">Function</span>) -------&gt; <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>注意</strong>： <code>constructor</code> 在类继承时会出错</p>
</li>
<li><p>例子：</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">B</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">A.prototype = <span class="keyword">new</span> B(); <span class="comment">//A继承自B</span></span><br><span class="line"><span class="keyword">var</span> aObj = <span class="keyword">new</span> A();</span><br><span class="line">alert(aobj.constructor === B) -----------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(aobj.constructor === A) -----------&gt; <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>而<code>instanceof</code>方法不会出现该问题，对象直接继承和间接继承的都会报<code>true</code>：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">alert(aobj <span class="keyword">instanceof</span> B) ----------------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(aobj <span class="keyword">instanceof</span> B) ----------------&gt; <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>言归正传，解决<code>construtor</code>的问题通常是让对象的<code>constructor</code>手动指向自己：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">aobj.constructor = A; <span class="comment">//将自己的类赋值给对象的constructor属性</span></span><br><span class="line">alert(aobj.constructor === A) -----------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(aobj.constructor === B) -----------&gt; <span class="literal">false</span>; <span class="comment">//基类不会报true了;</span></span><br></pre></td></tr></table></figure>
<h6 id="通用但很繁琐的方法：-prototype"><a href="#通用但很繁琐的方法：-prototype" class="headerlink" title="通用但很繁琐的方法： prototype"></a><strong>通用但很繁琐的方法</strong>： <code>prototype</code></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">alert(<span class="built_in">Object</span>.prototype.toString.call(a) === ‘[object <span class="built_in">String</span>]’) -------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(<span class="built_in">Object</span>.prototype.toString.call(b) === ‘[object <span class="built_in">Number</span>]’) -------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(<span class="built_in">Object</span>.prototype.toString.call(c) === ‘[object <span class="built_in">Array</span>]’) -------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(<span class="built_in">Object</span>.prototype.toString.call(d) === ‘[object <span class="built_in">Date</span>]’) -------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(<span class="built_in">Object</span>.prototype.toString.call(e) === ‘[object <span class="built_in">Function</span>]’) -------&gt; <span class="literal">true</span>;</span><br><span class="line">alert(<span class="built_in">Object</span>.prototype.toString.call(f) === ‘[object <span class="built_in">Function</span>]’) -------&gt; <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li>大小写不能写错，比较麻烦，但胜在通用。</li>
<li>通常情况下用<code>typeof</code>判断就可以了，遇到预知<code>Object</code>类型的情况可以选用<code>instanceof</code>或<code>constructor</code>方法</li>
</ul>
<h4 id="Javascript的数据类型有六种（ES6新增了第七种Symbol）"><a href="#Javascript的数据类型有六种（ES6新增了第七种Symbol）" class="headerlink" title="Javascript的数据类型有六种（ES6新增了第七种Symbol）"></a>Javascript的数据类型有六种（ES6新增了第七种<code>Symbol</code>）</h4><hr>
<ul>
<li>数值（<code>number</code>）：整数和小数（比如1和3.14）</li>
<li>字符串（<code>string</code>）：字符组成的文本（比如”Hello World”）</li>
<li>布尔值（<code>boolean</code>）：true（真）和false（假）两个特定值</li>
<li><code>undefined</code>：表示 未定义 或不存在，即此处目前没有任何值</li>
<li><code>null</code>：表示空缺，即此处应该有一个值，但目前为空</li>
<li>对象（<code>object</code>）：各种值组成的集合</li>
<li>通常，我们将数值、字符串、布尔值称为原始类型（<code>primitive type</code>）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（<code>complex type</code>）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于<code>undefined</code>和<code>null</code>，一般将它们看成两个特殊值</li>
</ul>
<h4 id="内存中一共分为几种对象："><a href="#内存中一共分为几种对象：" class="headerlink" title="内存中一共分为几种对象："></a>内存中一共分为几种对象：</h4><hr>
<ul>
<li>变量</li>
<li><code>DOM</code>对象</li>
<li>常量</li>
<li>自定义对象</li>
</ul>
<h4 id="数据类型转换"><a href="#数据类型转换" class="headerlink" title="数据类型转换"></a>数据类型转换</h4><hr>
<h5 id="转换函数"><a href="#转换函数" class="headerlink" title="转换函数"></a><strong>转换函数</strong></h5><hr>
<ul>
<li><code>toString()</code> 转换为字符串，在JavaScript中所有数据类型都可以转换为<code>string</code>类型</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> n1 = <span class="number">12</span>;</span><br><span class="line"><span class="keyword">var</span> n2 = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> o = &#123;&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">n1.toString(); <span class="comment">//"12"</span></span><br><span class="line">n2.toString(); <span class="comment">//"true"</span></span><br><span class="line">a.toString(); <span class="comment">//"1,2,3"</span></span><br><span class="line">o.toString(); <span class="comment">//"[object Object]"</span></span><br><span class="line">f.toString(); <span class="comment">//"function f()&#123;&#125;"</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>parseInt()</code>解析出一个<code>string</code>或者<code>number</code>类型的整数部分，如果没有可以转换的部分，则返回<code>NaN</code>（<code>not a number</code>）</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> n1 = <span class="string">"12"</span>;</span><br><span class="line"><span class="keyword">var</span> n2 = <span class="string">"23hello"</span>;</span><br><span class="line"><span class="keyword">var</span> n3 = <span class="string">"hello"</span>;</span><br><span class="line"><span class="built_in">parseInt</span>(n1); <span class="comment">//12</span></span><br><span class="line"><span class="built_in">parseInt</span>(n2); <span class="comment">//23</span></span><br><span class="line"><span class="built_in">parseInt</span>(n3); <span class="comment">//NaN</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>parseFloat()</code>解析出一个<code>string</code>的浮点数部分，如果没有可以转换的部分，则返回<code>NaN</code>（<code>not a number</code>）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> n1 = <span class="string">"1.2.3"</span>;</span><br><span class="line"><span class="keyword">var</span> n2 = <span class="string">"1.2hello"</span></span><br><span class="line"><span class="keyword">var</span> n3 = <span class="string">"hello"</span></span><br><span class="line"><span class="built_in">parseFloat</span>(n1); <span class="comment">//1.2</span></span><br><span class="line"><span class="built_in">parseFloat</span>(n2); <span class="comment">//1.2</span></span><br><span class="line"><span class="built_in">parseFloat</span>(n3); <span class="comment">//NaN</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h5 id="强制类型转换"><a href="#强制类型转换" class="headerlink" title="强制类型转换"></a><strong>强制类型转换</strong></h5><hr>
<ul>
<li><code>Boolean(value)</code>- 把给定的值转换成<code>Boolean</code>型</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Boolean</span>(<span class="number">123</span>); <span class="comment">//true</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="string">""</span>); <span class="comment">//false</span></span><br><span class="line"><span class="built_in">Boolean</span>([]); <span class="comment">//true</span></span><br><span class="line"><span class="built_in">Boolean</span>(&#123;&#125;); <span class="comment">//true</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="literal">null</span>); <span class="comment">//false</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="literal">undefined</span>); <span class="comment">//false</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>Number(value)</code>-把给定的值转换成数字（可以是整数或浮点数）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">Number</span>(<span class="string">"123"</span>); <span class="comment">//123</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="string">"123h"</span>); <span class="comment">//NaN</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">true</span>); <span class="comment">//1</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">false</span>); <span class="comment">//0</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">undefined</span>); <span class="comment">//NaN</span></span><br><span class="line"><span class="built_in">Number</span>(<span class="literal">null</span>); <span class="comment">//0</span></span><br><span class="line"><span class="built_in">Number</span>([]); <span class="comment">//0</span></span><br><span class="line"><span class="built_in">Number</span>(&#123;&#125;); <span class="comment">//NaN</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>String(value)</code>- 把给定的值转换成字符串</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">String</span>(<span class="number">123</span>); <span class="comment">//"123"</span></span><br><span class="line"><span class="built_in">String</span>([<span class="number">1</span>,<span class="number">2</span>]); <span class="comment">//"1,2"</span></span><br><span class="line"><span class="built_in">String</span>(<span class="literal">undefined</span>) <span class="comment">//"undefined"</span></span><br><span class="line"><span class="built_in">String</span>(<span class="literal">null</span>) <span class="comment">//"null"</span></span><br><span class="line"><span class="built_in">String</span>(&#123;&#125;) <span class="comment">//"[object Object]"</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h5 id="隐式转换"><a href="#隐式转换" class="headerlink" title="隐式转换"></a><strong>隐式转换</strong></h5><hr>
<ul>
<li>数字＋字符串：数字转换为字符串 <code>console.log(12+&quot;12&quot;)</code>; //1212</li>
<li>数字＋布尔值：<code>true</code>转换为<code>1</code>，<code>false</code>转换为<code>0</code>  <code>console.log(12+true)</code>; //13</li>
<li>字符串＋布尔值：布尔值转换为true或false <code>console.log(&quot;hello&quot;+true)</code>; //<code>hellotrue</code></li>
<li>布尔值＋布尔值 <code>console.log(true+true)</code>; //2</li>
</ul>
<h5 id="null和undefined"><a href="#null和undefined" class="headerlink" title="null和undefined"></a><strong>null和undefined</strong></h5><hr>
<ul>
<li><code>undefined</code> 表示一种未知状态，声明了但没有初始化的变量，变量的值时一个未知状态。访问不存在的属性或对象<code>window.xxx</code>）方法没有明确返回值时，返回值是一个<code>undefined.</code>当对未声明的变量应用<code>typeof</code>运算符时，显示为<code>undefined</code>。</li>
<li><code>null</code>表示尚未存在的对象,<code>null</code>是一个有特殊意义的值。可以为变量赋值为<code>null</code>，此时变量的值为“已知状态”(不是<code>undefined</code>)，即<code>null</code>。（用来初始化变量，清除变量内容，释放内存）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="literal">undefined</span>==<span class="literal">null</span>   <span class="comment">//结果为true,但含义不同。</span></span><br><span class="line"><span class="literal">undefined</span>===<span class="literal">null</span> <span class="comment">//false,两者类型不一致，前者为“undefined”，后者为“object”</span></span><br></pre></td></tr></table></figure>
<h4 id="3、javascript脚本执行顺序"><a href="#3、javascript脚本执行顺序" class="headerlink" title="3、javascript脚本执行顺序"></a>3、javascript脚本执行顺序</h4><hr>
<ul>
<li>第一步定义： 分为<code>var</code>定义 和函数定义<code>function</code></li>
<li>第二步执行： 其他所有</li>
<li>先从上往下定义完所有的后，再从上往下执行 除了<code>var</code>  <code>function</code>定义外的 其他都是执行 如：赋值 函数调用</li>
<li>在栈里面找到的，就不去堆里面找，因为栈空间小，就近原则【总之：先在栈里面找，找不到再去堆里面找】在栈里面开辟，就能找到堆里面的地址 如：<code>var b = function(){}</code></li>
</ul>
<h4 id="总结一下-运算的规则：-隐式转换"><a href="#总结一下-运算的规则：-隐式转换" class="headerlink" title="总结一下==运算的规则：(隐式转换)"></a>总结一下<code>==</code>运算的规则：(隐式转换)</h4><hr>
<ul>
<li><p><code>JS</code>中的值有两种类型：原始类型(<code>Primitive</code>)、对象类型(<code>Object</code>)。</p>
</li>
<li><p>原始类型包括：<code>Undefined</code>、<code>Null</code>、<code>Boolean</code>、<code>Number</code>和<code>String</code>等五种。</p>
</li>
<li><p><code>Undefined</code>类型和<code>Null</code>类型的都只有一个值，即<code>undefined</code>和<code>null</code>；<code>Boolean</code>类型有两个值：<code>true</code>和<code>false</code>；<code>Number</code>类型的值有很多很多；<code>String</code>类型的值理论上有无数个。</p>
</li>
<li><p>所有对象都有<code>valueOf()</code>和<code>toString()</code>方法，它们继承自<code>Object</code>，当然也可能被子类重写</p>
</li>
<li><p><code>undefined == null</code>，结果是<code>true</code>。且它俩与所有其他值比较的结果都是<code>false</code>。</p>
</li>
<li><p><code>String == Boolean</code>，需要两个操作数同时转为<code>Number</code>。</p>
</li>
<li><p><code>String/Boolean == Number</code>，需要<code>String/Boolean</code>转为<code>Number</code>。</p>
</li>
<li><p><code>Object == Primitive</code>，需要<code>Object</code>转为<code>Primitive</code>(具体通过<code>valueOf</code>和<code>toString</code>方法)</p>
</li>
</ul>
<h3 id="第三课时"><a href="#第三课时" class="headerlink" title="第三课时"></a>第三课时</h3><hr>
<h4 id="上节回顾："><a href="#上节回顾：" class="headerlink" title="上节回顾："></a>上节回顾：</h4><ul>
<li><p>1、<code>window</code>作用域</p>
<ul>
<li>只要在<code>script</code>标签中定义的变量，默认就在<code>window</code>的作用域之下</li>
<li>默认就是<code>window</code>这个对象里面写代码</li>
</ul>
</li>
<li><p>2、数据类型</p>
<ul>
<li><code>number</code>:数字</li>
<li><code>string</code>:字符类型，必须用引号引起来</li>
<li><code>boolean</code>:布尔类型  <code>true</code> <code>false</code></li>
<li><code>null</code>:变量引用了一块堆中一个空的空间</li>
<li><code>object</code>:引用对象类型（存在于堆里面）</li>
<li><code>array</code>:数组类型</li>
<li><code>function</code>:函数数据类型</li>
</ul>
</li>
<li><p><strong>对象数据类型：</strong> <code>object</code>,<code>array</code>,<code>function</code></p>
</li>
<li><p>3、<code>javascript</code>脚本执行顺序</p>
<ul>
<li>定义 <code>var</code> <code>function</code></li>
<li>执行 其他所有</li>
</ul>
</li>
</ul>
<h4 id="知识点：-2"><a href="#知识点：-2" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h4 id="1、运算符"><a href="#1、运算符" class="headerlink" title="1、运算符"></a><strong>1、运算符</strong></h4><hr>
<ul>
<li><p>算术运算符(<code>+</code>,<code>-</code>,<code>*</code>,<code>/</code>,<code>%</code>,<code>++</code>,<code>--</code>)</p>
<ul>
<li>如果引用所指的地方是<code>null</code>的话，那么在运算中就会自动变成<code>0</code></li>
<li><code>%</code>运算符 如：<code>4%5</code>取模 模是<code>4</code>  <code>7%5</code>取模 模是<code>7-5=2</code></li>
</ul>
</li>
<li><p>字符串和数字相加的情况：</p>
<ul>
<li>左右都是数字：数字相加</li>
<li>左右有一个字符串：字符串拼接</li>
<li>左右边有一个<code>null</code>:<code>null</code>看做<code>0</code></li>
<li>左右边有一个<code>undefined</code>：结果是<code>NAN</code>（<code>not is number</code>）</li>
</ul>
</li>
<li><p>赋值运算符(<code>=</code>,<code>-=</code>,<code>+=</code>,<code>*=</code>,<code>/=</code>,<code>%=</code>)</p>
</li>
<li><p>比较运算符(<code>==</code>,<code>===</code>,<code>!=</code>,<code>&gt;</code>,<code>&lt;</code>,<code>&gt;=</code>,<code>&lt;=</code>)</p>
<ul>
<li>先执行表达式计算再赋值</li>
<li><code>==</code>和<code>!=</code>在比较之前首先让双方的值做隐士类型转换，<code>===</code>不转换</li>
</ul>
</li>
<li><p>逻辑运算符(<code>||</code>,<code>&amp;&amp;</code>,<code>!</code>)</p>
<ul>
<li><code>||</code> 在js中和PHP中是不一样的 js中返回逻辑或的左边或右边的一个结果 PHP返回<code>||</code>或出来以后的结果即：<code>true</code> <code>false</code></li>
<li>特殊性（注意）—一定要记住（这个特性和其他编程语言不一样）：在<code>js</code>里返回不是布尔值</li>
<li><code>||</code> 短路运算 第一个条件为真 后面不执行</li>
<li><code>&amp;&amp;</code>把表达式最后一个值返回（注意这里）</li>
</ul>
</li>
</ul>
<h5 id="条件运符-表达式1-表达式2-表达式3-三元运算符"><a href="#条件运符-表达式1-表达式2-表达式3-三元运算符" class="headerlink" title="条件运符(表达式1?表达式2:表达式3)三元运算符"></a><strong>条件运符(<code>表达式1?表达式2:表达式3</code>)三元运算符</strong></h5><hr>
<ul>
<li><code>表达式1?表达式2:表达式3</code> 表达式1为真 返回表达式2 否则返回表达式3</li>
<li>三元运算符 可以多层次嵌套使用</li>
</ul>
<h4 id="2、在js中-有四种被认为是非："><a href="#2、在js中-有四种被认为是非：" class="headerlink" title="2、在js中 有四种被认为是非："></a><strong>2、在js中 有四种被认为是<code>非</code></strong>：</h4><hr>
<ul>
<li><code>undefined</code></li>
<li><code>null</code></li>
<li><code>false</code></li>
<li><code>0</code></li>
</ul>
<ul>
<li>例子：<code>var age = prompt(&quot;温馨提示：&quot;,&quot;请输入您的年龄&quot;)||0</code></li>
<li>当点击取消的时候，如果出现<code>undefined</code> <code>null</code>  <code>fasle</code>  <code>0</code> 表示非的逻辑 那么<code>||</code>就会过滤，取右边的值<code>0</code></li>
</ul>
<h3 id="第四课时"><a href="#第四课时" class="headerlink" title="第四课时"></a>第四课时</h3><hr>
<h4 id="上节回顾：-1"><a href="#上节回顾：-1" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li><p>1、运算符</p>
<ul>
<li>算术运算符(<code>+</code>,<code>-</code>,<code>*</code>,<code>/</code>,<code>%</code>,<code>++</code>,<code>--</code>)</li>
<li>如果<code>+</code>号左边和右边有一边是字符串类型的数据的话，这个时候就变成字符串拼接</li>
<li><code>var str = &quot;你好&quot;+123;</code>//你好123</li>
<li><code>var count = 2;</code></li>
<li><code>var str1 = &quot;你叫了我第&quot;-count+&quot;次&quot;;</code>//你叫了我第2次</li>
<li>如果引用所指的地方是<code>null</code>的话，那么在运算中就会自动变成0</li>
</ul>
</li>
<li><p>2、赋值运算符*<em>(<code>=</code>,<code>-=</code>,<code>+=</code>,`</em>=<code>,</code>/=<code>,</code>%=`)</p>
</li>
<li><p>3、 比较运算符(<code>==,===,!=,&gt;,&lt;,&gt;=,&lt;=</code>)</p>
<ul>
<li>先执行表达式计算再赋值</li>
<li><code>==</code>和<code>!=</code>在比较之前首先让双方的值做隐士类型转换，<code>===</code>不转换</li>
</ul>
</li>
<li>4、逻辑运算符(<code>||,&amp;&amp;,!</code>)</li>
<li>5、条件运算符(<code>1&gt;2?3:4</code>)</li>
</ul>
<h4 id="知识点：-3"><a href="#知识点：-3" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h5 id="1、console-log调试程序"><a href="#1、console-log调试程序" class="headerlink" title="1、console.log调试程序"></a><strong>1、<code>console.log</code>调试程序</strong></h5><hr>
<ul>
<li>开发中大量使用这个 而不用<code>alert</code></li>
</ul>
<h5 id="2、条件结构"><a href="#2、条件结构" class="headerlink" title="2、条件结构"></a><strong>2、条件结构</strong></h5><hr>
<ul>
<li><code>if</code></li>
</ul>
<h6 id="javascript中if语句优化写法"><a href="#javascript中if语句优化写法" class="headerlink" title="javascript中if语句优化写法"></a><code>javascript</code>中<code>if</code>语句优化写法</h6><ul>
<li>使用常见的三元操作符</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> (foo) bar(); <span class="keyword">else</span> baz(); ==&gt; foo?bar():baz();</span><br><span class="line"><span class="keyword">if</span> (!foo) bar(); <span class="keyword">else</span> baz(); ==&gt; foo?baz():bar();</span><br><span class="line"><span class="keyword">if</span> (foo) <span class="keyword">return</span> bar(); <span class="keyword">else</span> <span class="keyword">return</span> baz(); ==&gt; <span class="keyword">return</span> foo?bar():baz();</span><br></pre></td></tr></table></figure>
<ul>
<li>使用<code>and(&amp;&amp;)</code>和<code>or(||)</code>运算符</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> (foo) bar(); ==&gt; foo&amp;&amp;bar();</span><br><span class="line"><span class="keyword">if</span> (!foo) bar(); ==&gt; foo||bar();</span><br></pre></td></tr></table></figure>
<ul>
<li><code>if...else</code></li>
<li><code>if...else if...else</code></li>
<li>当通过判断返回某个值的时候，优先使用三元表达式</li>
<li>当通过判断执行<code>N</code>段逻辑代码的时候，只能用条件结构</li>
</ul>
<h3 id="第五课时"><a href="#第五课时" class="headerlink" title="第五课时"></a>第五课时</h3><hr>
<h4 id="上节回顾：-2"><a href="#上节回顾：-2" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li>1、<code>console.log</code>调试程序</li>
<li>2、条件结构<br>  <code>if</code><br>  <code>if...else</code><br>  <code>if...else if...else</code><ul>
<li>当通过判断返回某个值的时候，优先使用三元表达式</li>
<li>当通过判断执行<code>N</code>段逻辑代码的时候，只能用条件结构</li>
</ul>
</li>
</ul>
<h4 id="知识点：-4"><a href="#知识点：-4" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h5 id="1、switch"><a href="#1、switch" class="headerlink" title="1、switch"></a><strong>1、<code>switch</code></strong></h5><hr>
<ul>
<li><p><code>switch case break default</code> 条件   判断 退出  默认</p>
<ul>
<li>a.只要匹配上一个<code>case</code>，那么它下面的所有的<code>case</code>都会执行包括<code>default</code></li>
<li>b.<code>break</code>的意思跳出当前结构</li>
</ul>
</li>
</ul>
<h5 id="2、for"><a href="#2、for" class="headerlink" title="2、for"></a><strong>2、<code>for</code></strong></h5><hr>
<ul>
<li>循环有三个要素<ul>
<li>a.循环变量</li>
<li>b.判断（循环体）</li>
<li>c.改变循环变量</li>
<li>d.<code>continue</code>的意思结束本次循环进入下次循环</li>
</ul>
</li>
<li><code>continue</code> 结束本次循环，继续下一次循环  当前这次循环不做 直接做下面的</li>
<li><code>break</code> 结束后面的循环不做了</li>
</ul>
<h3 id="第六课时"><a href="#第六课时" class="headerlink" title="第六课时"></a>第六课时</h3><hr>
<h4 id="上节回顾：-3"><a href="#上节回顾：-3" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<p>1、<code>switch</code></p>
<ul>
<li><code>switch case break default</code> 条件   判断 退出  默认<ul>
<li>a.只要匹配上一个<code>case</code>，那么它下面的所有的<code>case</code>都会执行包括<code>default</code></li>
<li>b.<code>break</code>的意思跳出当前结构</li>
</ul>
</li>
</ul>
<p>2、<code>for</code></p>
<ul>
<li>循环有三个要素<ul>
<li>a.循环变量</li>
<li>b.判断条件（循环体）</li>
<li>c.改变循环变量</li>
<li>d.<code>continue</code>的意思结束本次循环进入下次循环</li>
</ul>
</li>
</ul>
<hr>
<h4 id="知识点：-5"><a href="#知识点：-5" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h4 id="1、while-do-while-没有谁好谁坏-只有适应场景不同"><a href="#1、while-do-while-没有谁好谁坏-只有适应场景不同" class="headerlink" title="1、while/do...while 没有谁好谁坏 只有适应场景不同"></a>1、<code>while/do...while</code> 没有谁好谁坏 只有适应场景不同</h4><hr>
<ul>
<li>比如：先吃饭 在买单 <code>do..while</code> 用户体验高 有风险  扫雷游戏也是先体验 在问是否退出 提高体验</li>
<li>比如：先买单 在吃饭 <code>while</code> 用户体验不高</li>
<li>一般情况下面，如果条件判断是<code>数字的</code>比较<code>==&lt;&gt;</code>，<code>for</code>循环优先.</li>
<li>如果是<code>非数值相关的</code>比较循环，<code>while</code>优先</li>
</ul>
<h4 id="2、代码内存解析"><a href="#2、代码内存解析" class="headerlink" title="2、代码内存解析"></a>2、代码内存解析</h4><hr>
<h5 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a><strong>闭包</strong></h5><hr>
<ul>
<li>a.程序永远是先定义后执行</li>
<li>b.执行永远从上到下</li>
<li>c.函数定义的话在堆（只是一个地址而已）</li>
<li>d.函数调用的时候，就会有自己的堆和栈（<code>闭包</code>）</li>
</ul>
<h5 id="闭包-作用域"><a href="#闭包-作用域" class="headerlink" title="闭包 作用域"></a><strong>闭包 作用域</strong></h5><hr>
<ul>
<li>记住：先定义<code>var</code>  <code>function</code>  在从上往下执行</li>
<li>定义定义在自己的栈里面 执行在自己的堆里面</li>
<li>运行在运行的环境中</li>
<li>函数每调用前  只是一个地址</li>
<li>只要调用一次函数就会动态开辟一块内存 创建一个封闭的空间 在自己的封闭的空间的栈中定义<code>var</code>在执行</li>
<li>函数执行完 里面的东西全部销毁</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//alert(x);//9:执行弹出x,结果x没定义,错误.</span></span><br><span class="line">alert(i);<span class="comment">//9:执行弹出i,然而i之前已经定义,只不过没地址,因此是undefiend</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="number">10</span>;<span class="comment">//1:var i;    10:把常量池中10的地址赋给栈中的i</span></span><br><span class="line"><span class="keyword">var</span> j = <span class="string">"你好"</span>;<span class="comment">//2:var j;   11:把常量池中 你好 的地址复给栈中的j</span></span><br><span class="line"><span class="keyword">var</span> k = z = <span class="literal">null</span>;<span class="comment">//3:var k,z;  12:把堆中null的地址赋值给z和k</span></span><br><span class="line"><span class="keyword">var</span> m = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="comment">//4:var m;   5:function匿名函数  13:把匿名函数在堆中的地址赋给栈中的m</span></span><br><span class="line">    alert(<span class="number">2</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> b = <span class="built_in">document</span>.body;<span class="comment">//6:var b;    14:把堆中document.body对象的地址赋给栈中的b</span></span><br><span class="line"><span class="keyword">var</span> f = <span class="literal">true</span>;<span class="comment">//7:var f; 15:把常量池中true的地址赋给栈中的变量f</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params"></span>)</span>&#123;<span class="comment">//8:function m;</span></span><br><span class="line">    alert(<span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    c = <span class="number">50</span>;<span class="comment">//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c</span></span><br><span class="line">    alert(<span class="string">'哈哈哈'</span>);</span><br><span class="line">    <span class="comment">//var c;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> c = <span class="number">150</span>; <span class="comment">// 函数m()还未执行到 还没被销毁 此时全局c的值c=50</span></span><br><span class="line">m();</span><br><span class="line"><span class="keyword">var</span> c = <span class="number">20</span>;<span class="comment">//到这里一步 m()已经执行完了 函数已经销毁了  这里的c还是20</span></span><br><span class="line">alert(c);<span class="comment">//20</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    c = <span class="number">50</span>;<span class="comment">//在局部变量中找不到定义的c 沿着作用域链找到了全局变量的c</span></span><br><span class="line">    alert(<span class="string">'哈哈哈'</span>);</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">inner</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        c = <span class="number">30</span>;</span><br><span class="line">        alert(<span class="string">'嘻嘻'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    inner();<span class="comment">//c在函数内部找不到定义 所以沿着作用域链找到了全局的c</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> c = <span class="number">20</span>;<span class="comment">//到这里一步 m()还没执行 函数没被销毁  这里的c是30</span></span><br><span class="line">m();</span><br><span class="line"></span><br><span class="line">alert(c);<span class="comment">//30</span></span><br></pre></td></tr></table></figure>
<h4 id="4、object对象"><a href="#4、object对象" class="headerlink" title="4、object对象"></a>4、object对象</h4><hr>
<h4 id="5、面向对象的程序设计"><a href="#5、面向对象的程序设计" class="headerlink" title="5、面向对象的程序设计"></a>5、面向对象的程序设计</h4><hr>
<ul>
<li>a.<code>function</code>构造器</li>
<li>b.<code>prototype</code>原型</li>
<li>c.<code>foreach</code></li>
<li>c.作用域</li>
<li>d.继承</li>
</ul>
<h4 id="一些内存图示"><a href="#一些内存图示" class="headerlink" title="一些内存图示"></a>一些内存图示</h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-d7b1dc1194558ac0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="闭包示例1"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-32121bca4ab77dba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="闭包示例2"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-f8c6735fdc8d7ee0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="闭包1"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-54d5b8e92e0266af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="闭包2"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-0d7c71a08e5c3dd5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="闭包3"></p>
<hr>
<h4 id="原型链的几张图解"><a href="#原型链的几张图解" class="headerlink" title="原型链的几张图解"></a>原型链的几张图解</h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-f6fab5bf39d4927a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="原型链图解"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-960b48ae2a258f3a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示00-new Object"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-46a363299f4cb52d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示01-函数Foo声明"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-5c2c02e45b6a34bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示-对象继承模式-01-浅拷贝"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-21688edeab3bb10d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示02-new Foo()"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-fc562b41d866cae5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示02-1-new 原理"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-f53b3e2d9833f545.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示03-Foo.prototype"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-ccbf4ddf8ea86e17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示-对象继承模式-03-基于对象的原型继承"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-724c8ddd463e8497.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示05-继承函数示例"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-b006171464fb7c9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示06-继承prototype模式"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-57f3858765368446.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示07-继承prototype模式改进"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-fc1f9e36ede219f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示08-继承prototype直接继承"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-55110b7283224dde.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示08-继承prototype空对象中介"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-a45122592360a214.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示09-继承prototype空对象中介封装expend"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-b832f7372de9dc35.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js原型链演示10-构造器拷贝继承"></p>
<ul>
<li>扩展阅读<ul>
<li><a href="https://zhuanlan.zhihu.com/p/22189387" target="_blank" rel="noopener">Javascript的原型链图详解</a></li>
</ul>
</li>
</ul>
<h3 id="第七课时"><a href="#第七课时" class="headerlink" title="第七课时"></a>第七课时</h3><hr>
<h4 id="上节回顾：-4"><a href="#上节回顾：-4" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li>1.<code>switch</code></li>
<li><p>2.<code>while/do...while</code></p>
<ul>
<li>一般情况下面，如果条件判断是数字的比较<code>==&lt;&gt;</code>，<code>for</code>循环优先.</li>
<li>如果是非数值相关的比较循环，<code>while</code>优先</li>
</ul>
</li>
<li><p>3.<code>function</code>函数</p>
</li>
<li>4.代码内存解析<ul>
<li><strong>闭包</strong><ul>
<li>a.程序永远是先定义后执行</li>
<li>b.执行永远从上之下</li>
<li>c.函数定义的话在堆（只是一个地址而已）</li>
<li>d.函数调用的时候，就会有自己的堆和栈（闭包）</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="知识点：-6"><a href="#知识点：-6" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h4 id="1、object对象"><a href="#1、object对象" class="headerlink" title="1、object对象"></a><strong>1、object对象</strong></h4><hr>
<ul>
<li><code>new</code>关键字代表的是新开辟一块内存空间</li>
<li><p>没有被引用的内存空间，会在适当的时候被销毁</p>
<ul>
<li><p>两句代码含义等同</p>
<ul>
<li><code>var person = new Object()</code>;</li>
<li><code>var person = {};</code></li>
</ul>
</li>
</ul>
</li>
<li><p>访问对象的属性除了用 对象引用<code>.属性</code> <code>key</code>以外，还可以使用对象引用<code>[属性key]</code></p>
</li>
</ul>
<h5 id="new-原理详细解析"><a href="#new-原理详细解析" class="headerlink" title="new 原理详细解析"></a>new 原理详细解析</h5><hr>
<ul>
<li>无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个<code>prototype</code>属性，这个属性指向函数的原型对象。</li>
<li>在默认情况下，所有原型对象都会自动获得一个<code>constructor</code>（构造函数）属性，这个属性包含一个指向<code>prototype</code>属性所在函数的指针（就是指向新创建的函数）。</li>
<li>通过这个构造函数（原型对象的构造函数），可以继续为原型对象添加其他属性和方法。</li>
<li>当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。<code>ECMA-262</code>第5版管这个指针叫 <code>[[Prototype]]</code>。脚本中没有标准的方式访问<code>[[Prototype]]</code>，但<code>Firefox</code>、<code>Safari</code>和<code>Chrome</code>在每个对象上都支持一个属性<code>__proto__</code>；而在其他实现中，这个属性对脚本是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例和构造函数的原型对象之间，而不是存在于实例和构造函数之间</li>
</ul>
<h5 id="new创建对象的步骤"><a href="#new创建对象的步骤" class="headerlink" title="new创建对象的步骤"></a>new创建对象的步骤</h5><hr>
<ul>
<li>创建一个新的对象</li>
<li>将构造函数的作用域赋给新对象</li>
<li>执行构造函数的代码，为这个新对象添加属性</li>
<li>返回新对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name, age</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="keyword">this</span>.age = age;</span><br><span class="line">    <span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createPerson</span>(<span class="params">P</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 创建一个新对象</span></span><br><span class="line">    <span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">    <span class="comment">// 获取传递给Person函数的参数</span></span><br><span class="line">    <span class="keyword">var</span> args = <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>, <span class="number">1</span>);</span><br><span class="line">    <span class="comment">// 新对象的__proto__属性指向Person的原型对象</span></span><br><span class="line">    o.__proto__ = P.prototype;</span><br><span class="line">    <span class="comment">// Person的原型对象的constructor指向Person</span></span><br><span class="line">    P.prototype.constructor = P;</span><br><span class="line">    <span class="comment">// 把Person构造函数的作用域赋给新对象</span></span><br><span class="line">    <span class="comment">// 给这个新对象添加属性（name,age,say）</span></span><br><span class="line">    P.apply(o, args);</span><br><span class="line">    <span class="comment">// 返回这个新对象</span></span><br><span class="line">    <span class="keyword">return</span> o;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p = createPerson(Person, <span class="string">'wang'</span>, <span class="number">35</span>);</span><br></pre></td></tr></table></figure>
<h4 id="2、面向对象的程序设计"><a href="#2、面向对象的程序设计" class="headerlink" title="2、面向对象的程序设计"></a><strong>2、面向对象的程序设计</strong></h4><hr>
<ul>
<li><p><strong><code>function</code>构造器</strong></p>
<ul>
<li><strong>共同点:</strong><ul>
<li>动态创建一块内存空间，闭包</li>
</ul>
</li>
<li><strong>不同点:</strong><ul>
<li>函数调用是没有办法拿到空间的地址的，而且这块地址是一块临时地址，执行完函数之后，就会销毁</li>
<li><code>new</code>开辟内存空间，把这块空间的地址返回，这块空间就有可能长期的被引用</li>
</ul>
</li>
</ul>
</li>
<li><strong><code>prototype</code>原型</strong><ul>
<li>通过原型使通过同样一个构造器所<code>new（创建）</code>出来的对象具有相同的属性和行为</li>
<li><code>prototype</code>本质就是一个对象</li>
</ul>
</li>
<li><code>foreach</code></li>
<li><code>this</code> 指代当前创建的这块内存 <code>this.name=name</code> 指代当前内存中的这个<code>name</code>属性 接收外界传过来的值</li>
<li><code>继承</code></li>
</ul>
<h5 id="多种构造函数"><a href="#多种构造函数" class="headerlink" title="多种构造函数"></a>多种构造函数</h5><hr>
<h6 id="传统的创建对象"><a href="#传统的创建对象" class="headerlink" title="传统的创建对象"></a><strong>传统的创建对象</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> person = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"></span><br><span class="line">person.name = “lancer”;</span><br><span class="line"></span><br><span class="line">person.age = <span class="number">24</span>;</span><br><span class="line"></span><br><span class="line">person.job = “UI”;</span><br><span class="line"></span><br><span class="line">person.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">alert(<span class="keyword">this</span>.name);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">person.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="工厂模式"><a href="#工厂模式" class="headerlink" title="工厂模式"></a><strong>工厂模式</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createPerson</span>(<span class="params">name,age,job</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> o = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"></span><br><span class="line">o.name = name;</span><br><span class="line"></span><br><span class="line">o.age = age;</span><br><span class="line"></span><br><span class="line">o.job = job;</span><br><span class="line"></span><br><span class="line">o.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">alert(o.name);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> o;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = createPerson(“lancer”,<span class="number">24</span>,”UI”);</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a><strong>构造函数</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,job</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.age = age;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.job =job;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">alert(<span class="keyword">this</span>.name)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = createPerson(“lancer”,<span class="number">24</span>,”UI”);</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="原型模式"><a href="#原型模式" class="headerlink" title="原型模式"></a><strong>原型模式</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Person.prototype.name =”lancer”;</span><br><span class="line"></span><br><span class="line">Person.prototype.age =<span class="number">24</span>;</span><br><span class="line"></span><br><span class="line">Person.prototype.job = “UI”;</span><br><span class="line"></span><br><span class="line">Person.prototype.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">alert(<span class="keyword">this</span>.name)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> Person();</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person2 = <span class="keyword">new</span> Person();</span><br><span class="line"></span><br><span class="line">person2.name =”lara”</span><br><span class="line"></span><br><span class="line">person2.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="简单原型模式"><a href="#简单原型模式" class="headerlink" title="简单原型模式"></a><strong>简单原型模式</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Person.prototype = &#123;</span><br><span class="line"></span><br><span class="line">name : “lancer”,</span><br><span class="line"></span><br><span class="line">age : <span class="number">24</span>,</span><br><span class="line"></span><br><span class="line">job : “UI”,</span><br><span class="line"></span><br><span class="line">sayName : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">alert(<span class="keyword">this</span>.name)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> Person();</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="构造函数和原型模式"><a href="#构造函数和原型模式" class="headerlink" title="构造函数和原型模式"></a><strong>构造函数和原型模式</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,job</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.age = age;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.job =job;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Person.prototype = &#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span> :Person,</span><br><span class="line"></span><br><span class="line">sayName : function()&#123;</span><br><span class="line"></span><br><span class="line">alert(<span class="keyword">this</span>.name)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> Person(“lancer”,”<span class="number">24</span>″,”UI”);</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="动态原型模式"><a href="#动态原型模式" class="headerlink" title="动态原型模式"></a><strong>动态原型模式</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age,job</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.age = age;</span><br><span class="line"></span><br><span class="line"><span class="keyword">this</span>.job =job;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">typeof</span> <span class="keyword">this</span>.sayName !=”<span class="function"><span class="keyword">function</span>”)</span>&#123;</span><br><span class="line"></span><br><span class="line">Person.prototype = &#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span> :Person,</span><br><span class="line"></span><br><span class="line">sayName : function()&#123;</span><br><span class="line"></span><br><span class="line">alert(<span class="keyword">this</span>.name)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = <span class="keyword">new</span> Person(“lancer”,”<span class="number">24</span>″,”UI”);</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br></pre></td></tr></table></figure>
<h6 id="稳妥构造函数"><a href="#稳妥构造函数" class="headerlink" title="稳妥构造函数"></a><strong>稳妥构造函数</strong></h6><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> Person = <span class="function"><span class="keyword">function</span>(<span class="params">name,age,job</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> O = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"></span><br><span class="line">O.sayName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">alert(name);</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> O</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> person1 = Person(“lancer”,<span class="number">24</span>,”UI”);</span><br><span class="line"></span><br><span class="line">person1.sayName();</span><br></pre></td></tr></table></figure>
<h4 id="其他："><a href="#其他：" class="headerlink" title="其他："></a><strong>其他：</strong></h4><hr>
<ul>
<li>函数调用后一定有返回值，没有返回值就是<code>undefined</code></li>
</ul>
<h4 id="一些内存图示-1"><a href="#一些内存图示-1" class="headerlink" title="一些内存图示"></a>一些内存图示</h4><hr>
<p><img src="https://github.com/poetries/TZ-Front-End-Note/raw/master/JS-Basic-star/images/DOM7.png" alt></p>
<h3 id="第八课时"><a href="#第八课时" class="headerlink" title="第八课时"></a>第八课时</h3><hr>
<h4 id="上节回顾：-5"><a href="#上节回顾：-5" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<h4 id="1-object对象"><a href="#1-object对象" class="headerlink" title="1.object对象"></a><strong>1.object对象</strong></h4><hr>
<ul>
<li><code>new</code>关键字代表的是新开辟一块内存空间</li>
<li>没有被引用的内存空间，会在适当的时候被销毁<ul>
<li>两句代码含义等同</li>
<li><code>var person = new Object();</code></li>
<li><code>var person = {};</code></li>
<li>访问对象的属性除了用 对象引用属性<code>key</code>以外，还可以使用对象引用<code>[属性key]</code></li>
</ul>
</li>
</ul>
<h4 id="2-面向对象的程序设计"><a href="#2-面向对象的程序设计" class="headerlink" title="2.面向对象的程序设计"></a><strong>2.面向对象的程序设计</strong></h4><hr>
<ul>
<li>a.<code>function</code>构造器<ul>
<li>共同点:<ul>
<li>动态创建一块内存空间，闭包</li>
</ul>
</li>
<li>不同点：<ul>
<li>函数调用是没有办法拿到空间的地址的，而且这块地址是一块临时地址，执行完函数之后，就会销毁</li>
<li><code>new</code>开辟内存空间，把这块空间的地址返回，这块空间就有可能长期的被引用</li>
</ul>
</li>
</ul>
</li>
<li>b.<code>prototype</code>原型<ul>
<li>通过原型使通过同样一个构造器所<code>new</code>（创建）出来的对象具有相同的属性和行为</li>
<li><code>prototype</code>本质就是一个对象</li>
</ul>
</li>
<li>c.<code>foreach</code></li>
<li>c.<code>this</code></li>
<li>d.继承</li>
</ul>
<h4 id="知识点：-7"><a href="#知识点：-7" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h4 id="1-prototype内存解析"><a href="#1-prototype内存解析" class="headerlink" title="1.prototype内存解析"></a><strong>1.prototype内存解析</strong></h4><hr>
<ul>
<li><code>prototype</code>是原型，是一块所有对应构造器创建的对象都共享的内存空间</li>
<li>在面向对象设计程序的时候，属性应该是对应的空间的，而功能应该是<code>prototype</code>公共空间的</li>
</ul>
<h4 id="2-通过prototype扩展功能"><a href="#2-通过prototype扩展功能" class="headerlink" title="2.通过prototype扩展功能"></a><strong>2.通过prototype扩展功能</strong></h4><hr>
<ul>
<li>所有的构造器都是继承于<code>Object</code>构造器的，因此只要<code>Object</code>的原型里有的功能，所有的对象都有</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//多个对象的构造 以及 多个对象之间如何建立联系</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Student</span>(<span class="params">name,age,sex</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="keyword">this</span>.age = age;</span><br><span class="line">    <span class="keyword">this</span>.sex = sex;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Bingqilin</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Game</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Hour</span>(<span class="params">time</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.time = time;</span><br><span class="line">&#125;</span><br><span class="line">Student.prototype = &#123;</span><br><span class="line"></span><br><span class="line">    eat:<span class="function"><span class="keyword">function</span>(<span class="params">b</span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name+<span class="string">"喜欢吃"</span>+b.name);</span><br><span class="line">    &#125;,</span><br><span class="line">    mess:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name+<span class="string">"的信息："</span>+<span class="keyword">this</span>.age+<span class="string">','</span>+<span class="keyword">this</span>.sex);</span><br><span class="line">    &#125;,</span><br><span class="line">    sleep:<span class="function"><span class="keyword">function</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name+<span class="string">"每天睡,"</span>+h.time+<span class="string">'小时'</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    work:<span class="function"><span class="keyword">function</span>(<span class="params">h</span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name+<span class="string">"每天工作,"</span>+h.time+<span class="string">'小时'</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    like:<span class="function"><span class="keyword">function</span>(<span class="params">g</span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name+<span class="string">"喜欢打,"</span>+g.name);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Student(<span class="string">"小明"</span>,<span class="number">22</span>,<span class="string">"男"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> Bingqilin(<span class="string">"黑色的冰淇淋"</span>);</span><br><span class="line">s.eat(b);<span class="comment">//小明喜欢吃黑色的冰淇淋</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> g = <span class="keyword">new</span> Game(<span class="string">"英雄联盟"</span>);</span><br><span class="line">s.like(g);<span class="comment">//把对象的地址发送给like的参数即可访问构造函数Game的name属性</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> h = <span class="keyword">new</span> Hour(<span class="number">10</span>);</span><br><span class="line">s.sleep(h);</span><br><span class="line">s.work(h);</span><br></pre></td></tr></table></figure>
<h4 id="一些内存图示-2"><a href="#一些内存图示-2" class="headerlink" title="一些内存图示"></a><strong>一些内存图示</strong></h4><hr>
<p><img src="https://github.com/poetries/TZ-Front-End-Note/raw/master/JS-Basic-star/images/DOM8.png" alt></p>
<p><img src="https://github.com/poetries/TZ-Front-End-Note/raw/master/JS-Basic-star/images/DOM9.png" alt></p>
<h3 id="第九课时"><a href="#第九课时" class="headerlink" title="第九课时"></a>第九课时</h3><hr>
<h4 id="回顾："><a href="#回顾：" class="headerlink" title="回顾："></a><strong>回顾：</strong></h4><hr>
<h5 id="1、prototype内存解析"><a href="#1、prototype内存解析" class="headerlink" title="1、prototype内存解析"></a><strong>1、prototype内存解析</strong></h5><hr>
<ul>
<li><code>prototype</code>是原型，是一块所有对应构造器创建的对象都共享的内存空间</li>
<li>在面向对象设计程序的时候，属性应该是对应的空间的，而功能应该是<code>prototype</code>公共空间的</li>
</ul>
<h5 id="2、通过prototype扩展功能"><a href="#2、通过prototype扩展功能" class="headerlink" title="2、通过prototype扩展功能"></a><strong>2、通过prototype扩展功能</strong></h5><hr>
<ul>
<li>所有的构造器都是继承于<code>Object</code>构造器的，因此只要<code>Object</code>的原型里有的功能，所有的对象都有</li>
<li>构造器在定义的时候 就默认创建了一个空的原型</li>
</ul>
<h5 id="3、封装"><a href="#3、封装" class="headerlink" title="3、封装"></a><strong>3、封装</strong></h5><hr>
<ul>
<li>1：找对象  小头爸爸  大头儿子  饭</li>
<li>2：抽象（类，构造器）</li>
<li><p>3：创建对象并且建立关系（操作对象）</p>
</li>
<li><p>面向对象例子</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//小头爸爸牵着大头儿子的手去吃饭，吃完饭之后，</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//小头爸爸背着大头儿子回家，回家后儿子学习，老爸工作，工作学习完后</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//儿子看动画片</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//围裙妈妈带儿子睡觉</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//张三和张四</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//分析对象 小头爸爸 大头儿子 饭 以及功能</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//设计构造器（类）</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建对象以及他们之间的关联</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.age = age;</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Rice</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//Person.prototype.getHand = function()&#123;//这样子写也可以 但还是用默认生成的那块空的内存对象 往里面添加属性 方法</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//不浪费内存</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//在prototype中定义的每个对象都有这些功能</span></span><br><span class="line"></span><br><span class="line">Person.prototype = &#123;<span class="comment">//这样子写 抛弃了默认生成的那块空的内存对象 重新创建了一块新的内存对象 记住：原型的本质是对象</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//多个功能写在一起</span></span><br><span class="line"></span><br><span class="line"> getHand:<span class="function"><span class="keyword">function</span>(<span class="params">person</span>)</span>&#123;<span class="comment">//牵手</span></span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"在牵着"</span>+person.name+<span class="string">"的手...."</span>);</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"></span><br><span class="line"> eat:<span class="function"><span class="keyword">function</span>(<span class="params">rice</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"在吃"</span>+rice.name);</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"></span><br><span class="line"> <span class="comment">//需求 18岁以上才能背人</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">/* //写法一 不推荐 这个满足18岁的功能是自己强加的 不是客户需求的</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> carry:function(person)&#123;//这里设计不合理 让老爸有这个功能 儿子没有这个功能</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> if(this.age&gt;=18)&#123;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> alert(this.name+'背着'+person.name);</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> &#125;else&#123;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> alert(this.name+",还未满18岁，背不起");</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> &#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> &#125;,*/</span></span><br><span class="line"></span><br><span class="line"> backhome:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"回家"</span>);</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"></span><br><span class="line"> study:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"正在学习"</span>);</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"></span><br><span class="line"> watchTV:<span class="function"><span class="keyword">function</span>(<span class="params">jm</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"正在看"</span>+jm+<span class="string">'...'</span>);</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Person(<span class="string">"老爸"</span>,<span class="number">20</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> Person(<span class="string">"儿子"</span>,<span class="number">15</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//p1.getHand(p2);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//p1.eat(new Rice("蛋炒饭"));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//p2.eat(new Rice("猪脚饭"));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//p1.carry(p2);//老爸背儿子</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//p2.carry(p1);//让儿子背老爸 输出结果：儿子,还未满18岁，背不起</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//p1.backhome();</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//写法二 不推荐 100对关系 代码写很多遍</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">//让老爸单独有背的这个功能 儿子没有这个功能</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">p1.carry = function(person)&#123;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> alert(this.name+'背着'+person.name);</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">p1.carry(p2);</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//-------通过继承解决这个 让老爸单独有背的这个功能 儿子没有这个功能 可以应对多功能 多需求</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//功能函数</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.prototype.extends = <span class="function"><span class="keyword">function</span>(<span class="params">func,actions</span>)</span>&#123;<span class="comment">//让所有的子孙 构造器都有这个功能</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> prop <span class="keyword">in</span> func.prototype)&#123;<span class="comment">//传进一个func构造器 迭代构造器中的功能 把构造器中的功能全都映射过来 复制一份</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.prototype[prop] = func.prototype[prop];<span class="comment">//迭代原型中的所有的功能到 当前里面去</span></span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> prop <span class="keyword">in</span> actions)&#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.prototype[prop] = actions[prop];</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Father.extends(Person,&#123;</span><br><span class="line"></span><br><span class="line"> carry:<span class="function"><span class="keyword">function</span>(<span class="params">person</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">'背着'</span>+person.name);</span><br><span class="line"></span><br><span class="line"> &#125;,</span><br><span class="line"></span><br><span class="line"> work:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"正在工作"</span>);</span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//扩展</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//设计程序有个原则：不修改只增加</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Children</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Children.extends(Person);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Mother</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">this</span>.name = name;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Mother.extends(Person,&#123;</span><br><span class="line"></span><br><span class="line"> scoop:<span class="function"><span class="keyword">function</span>(<span class="params">person</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"> <span class="comment">//判断必须是children的对象才能执行这个功能</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//if()&#123;</span></span><br><span class="line"></span><br><span class="line"> alert(<span class="keyword">this</span>.name+<span class="string">"唱着摇篮曲哄"</span>+person.name+<span class="string">"睡觉"</span>);</span><br><span class="line"></span><br><span class="line"> <span class="comment">//&#125;</span></span><br><span class="line"></span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Father.prototype.carry= function(person)&#123;//创建这个原型的想法是：原来Person有的功能 我都需要有 并在这些基础上加一个功能 carry</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> //如何建立Father基础Person的功能？写一个继承的小工具来操作</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> alert(this.name+'背着'+person.name);</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">&#125;;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Father.prototype.work = function()&#123;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"> alert(this.name+"正在工作");</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">&#125;</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Father(<span class="string">"老爸"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> Children(<span class="string">"儿子"</span>);</span><br><span class="line"></span><br><span class="line">p1.carry(p2);<span class="comment">//只有老爸有carry这个功能</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//p2.carry(p1);//error 儿子没有carry这个功能</span></span><br><span class="line"></span><br><span class="line">p2.study();<span class="comment">//儿子在学习</span></span><br><span class="line"></span><br><span class="line">p1.work();<span class="comment">//老爸在工作</span></span><br><span class="line"></span><br><span class="line">p1.watchTV(<span class="string">'看足球'</span>);</span><br><span class="line"></span><br><span class="line">p2.watchTV(<span class="string">'蜡笔小新'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p3 = <span class="keyword">new</span> Mother(<span class="string">'围裙妈妈'</span>);</span><br><span class="line"></span><br><span class="line">p3.scoop(p2);</span><br></pre></td></tr></table></figure>
<h4 id="知识点：-8"><a href="#知识点：-8" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<ul>
<li>1.继承</li>
<li>2.面向对象程序设计案例（猜拳）</li>
</ul>
<h4 id="一些内存图示-3"><a href="#一些内存图示-3" class="headerlink" title="一些内存图示"></a><strong>一些内存图示</strong></h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-9d8603509767ea7a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-44bd5c0bf459b4d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-17266c52ca52c896.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-1bf8c506d61084c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<h3 id="第十课时"><a href="#第十课时" class="headerlink" title="第十课时"></a>第十课时</h3><hr>
<h4 id="上节回顾：-6"><a href="#上节回顾：-6" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<h4 id="1-继承"><a href="#1-继承" class="headerlink" title="1.继承"></a><strong>1.继承</strong></h4><hr>
<ul>
<li>本质就是从一个<code>prototype</code>对象中把它的功能都<code>copy</code>到另一个<code>prototype</code>对象</li>
<li>继承为什么要循环</li>
</ul>
<h4 id="2-call-apply方法的使用"><a href="#2-call-apply方法的使用" class="headerlink" title="2.call apply方法的使用"></a><strong>2.call apply方法的使用</strong></h4><hr>
<ul>
<li><code>func.call（obj）</code>：调用<code>func</code>的时候，以<code>obj</code>这个对象的作用域去调用</li>
<li>改变函数在调用的时候里面闭包的作用域</li>
<li><code>call(obj,arg1,arg2,arg3)</code>;<code>call</code>第一个参数传对象，可以是<code>null</code>。参数以逗号分开进行传值，参数可以是任何类型。<br><code>apply(obj,[arg1,arg2,arg3])</code>;<code>apply</code>第一个参数传对象，参数可以是数组或者<code>arguments</code>对象</li>
</ul>
<h4 id="知识点：-9"><a href="#知识点：-9" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<h4 id="API-application-program-interface"><a href="#API-application-program-interface" class="headerlink" title="API application program interface"></a>API application program interface</h4><hr>
<ul>
<li>第一：遇到问题</li>
<li>第二：查资料或者学习  -&gt; 解决问题</li>
<li>第三：记住有这个功能</li>
<li>第四：查资料（百度）</li>
</ul>
<h4 id="常用API"><a href="#常用API" class="headerlink" title="常用API"></a>常用API</h4><hr>
<ul>
<li>1.<code>String</code></li>
<li>2.<code>Array</code></li>
<li>3.<code>Math Math.random();</code></li>
<li>4.<code>Date</code></li>
</ul>
<h5 id="日期型函数Date"><a href="#日期型函数Date" class="headerlink" title="日期型函数Date"></a>日期型函数<code>Date</code></h5><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-4c5426128f64acff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="Date 对象方法"></p>
<ul>
<li><strong>声明</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>(); <span class="comment">//系统当前时间</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>(yyyy, mm, dd, hh, mm, ss);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>(yyyy, mm, dd);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>(“monthName dd, yyyy hh:mm:ss”);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>(“monthName dd, yyyy”);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>(epochMilliseconds);</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>获取时间的某部份</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"></span><br><span class="line">myDate.getYear(); <span class="comment">//获取当前年份(2位)</span></span><br><span class="line"></span><br><span class="line">myDate.getFullYear(); <span class="comment">//获取完整的年份(4位,1970-????)</span></span><br><span class="line"></span><br><span class="line">myDate.getMonth(); <span class="comment">//获取当前月份(0-11,0代表1月)</span></span><br><span class="line"></span><br><span class="line">myDate.getDate(); <span class="comment">//获取当前日(1-31)</span></span><br><span class="line"></span><br><span class="line">myDate.getDay(); <span class="comment">//获取当前星期X(0-6,0代表星期天)</span></span><br><span class="line"></span><br><span class="line">myDate.getTime(); <span class="comment">//获取当前时间(从1970.1.1开始的毫秒数) 时间戳！！</span></span><br><span class="line"></span><br><span class="line">myDate.getHours(); <span class="comment">//获取当前小时数(0-23)</span></span><br><span class="line"></span><br><span class="line">myDate.getMinutes(); <span class="comment">//获取当前分钟数(0-59)</span></span><br><span class="line"></span><br><span class="line">myDate.getSeconds(); <span class="comment">//获取当前秒数(0-59)</span></span><br><span class="line"></span><br><span class="line">myDate.getMilliseconds(); <span class="comment">//获取当前毫秒数(0-999)</span></span><br><span class="line"></span><br><span class="line">myDate.toLocaleDateString(); <span class="comment">//获取当前日期</span></span><br><span class="line"></span><br><span class="line">myDate.toLocaleTimeString(); <span class="comment">//获取当前时间</span></span><br><span class="line"></span><br><span class="line">myDate.toLocaleString( ); <span class="comment">//获取日期与时间</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>计算之前或未来的时间</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"></span><br><span class="line">myDate.setDate(myDate.getDate() + <span class="number">10</span>); <span class="comment">//当前时间加10天//类似的方法都基本相同,以set开头,具体参考第2点</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>计算两个日期的偏移量</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> i = daysBetween(beginDate,endDate); <span class="comment">//返回天数</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = beginDate.getTimezoneOffset(endDate); <span class="comment">//返回分钟数</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>检查有效日期</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//checkDate() 只允许”mm-dd-yyyy”或”mm/dd/yyyy”两种格式的日期</span></span><br><span class="line"><span class="keyword">if</span>( checkDate(“<span class="number">2006</span><span class="number">-01</span><span class="number">-01</span>”) )&#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> r = <span class="regexp">/^(\d&#123;2&#125;|\d&#123;4&#125;)[\/-]\d&#123;1,2&#125;[\/-]\d&#123;1,2&#125;$/</span>;<span class="keyword">if</span>( r.test( myString ) )&#123; &#125;</span><br></pre></td></tr></table></figure>
<h5 id="字符串String型函数API"><a href="#字符串String型函数API" class="headerlink" title="字符串String型函数API"></a>字符串String型函数API</h5><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-588f28213506abe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="js下常用的字符串方法"></p>
<ul>
<li><strong>声明</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = <span class="keyword">new</span> <span class="built_in">String</span>(“Every good boy does fine.”);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myString = “Every good boy does fine.”;</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>字符串连接</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = “Every ” + “good boy ” + “does fine.”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myString = “Every “; myString += “good boy does fine.”;</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>截取字符串</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//截取第 6 位开始的字符</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myString = “Every good boy does fine.”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> section = myString.substring(<span class="number">6</span>); <span class="comment">//结果: “good boy does fine.”</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//截取第 0 位开始至第 10 位为止的字符</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myString = “Every good boy does fine.”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> section = myString.substring(<span class="number">0</span>,<span class="number">10</span>); <span class="comment">//结果: “Every good”</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//截取从第 11 位到倒数第 6 位为止的字符</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myString = “Every good boy does fine.”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> section = myString.slice(<span class="number">11</span>,<span class="number">-6</span>); <span class="comment">//结果: “boy does”</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//从第 6 位开始截取长度为 4 的字符</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> myString = “Every good boy does fine.”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> section = myString.substr(<span class="number">6</span>,<span class="number">4</span>); <span class="comment">//结果: “good”</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>转换大小写</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = “Hello”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> lcString = myString.toLowerCase(); <span class="comment">//结果: “hello”</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> ucString = myString.toUpperCase(); <span class="comment">//结果: “HELLO”</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>字符串比较</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> aString = “Hello!”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bString = <span class="keyword">new</span> <span class="built_in">String</span>(“Hello!”);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>( aString == “Hello!” )&#123; &#125; <span class="comment">//结果: true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>( aString == bString )&#123; &#125; <span class="comment">//结果: true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>( aString === bString )&#123; &#125; <span class="comment">//结果: false (两个对象不同,尽管它们的值相同)</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>检索字符串</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = “hello everybody.”;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>( myString.indexOf(“every”) &gt; <span class="number">-1</span> )&#123; &#125; <span class="comment">//结果: true</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>查找替换字符串</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = “I is your father.”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> result = myString.replace(“is”,”am”); <span class="comment">//结果: “I am your father.”</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>特殊字符</strong></p>
<ul>
<li><code>\b</code> : 后退符 </li>
<li><code>\t</code> : 水平制表符</li>
<li><code>\n</code> : 换行符 </li>
<li><code>\v</code> : 垂直制表符</li>
<li><code>\f</code> : 分页符 </li>
<li><code>\r</code> : 回车符</li>
<li><code>\”</code> : 双引号 </li>
<li><code>\’</code> : 单引号</li>
<li><code>\\ 反斜杆</code></li>
</ul>
</li>
</ul>
<ul>
<li><strong>将字符转换成<code>Unicode</code>编码</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = “hello”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> code = myString.charCodeAt(<span class="number">3</span>); <span class="comment">//返回”l”的Unicode编码(整型)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> char = <span class="built_in">String</span>.fromCharCode(<span class="number">66</span>); <span class="comment">//返回Unicode为66的字符</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>将字符串转换成URL编码</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> myString = “hello all”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> code = <span class="built_in">encodeURI</span>(myString); <span class="comment">//结果: “hello%20all”</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="built_in">decodeURI</span>(code); <span class="comment">//结果: “hello all”</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//相应的还有: encodeURIComponent() decodeURIComponent()</span></span><br></pre></td></tr></table></figure>
<ul>
<li>扩展阅读<ul>
<li><a href="http://blog.poetries.top/2016/08/02/javascript%20%E4%B8%8B%E5%B8%B8%E7%94%A8%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%93%8D%E4%BD%9C/">JavaScript下常用的字符串</a></li>
</ul>
</li>
</ul>
<h5 id="Math对象型"><a href="#Math对象型" class="headerlink" title="Math对象型"></a>Math对象型</h5><hr>
<ul>
<li><p><code>Math.abs(num)</code> : 返回<code>num</code>的绝对值</p>
</li>
<li><p><code>Math.acos(num)</code> : 返回<code>num</code>的反余弦值</p>
</li>
<li><p><code>Math.asin(num)</code> : 返回<code>num</code>的反正弦值</p>
</li>
<li><p><code>Math.atan(num)</code> : 返回<code>num</code>的反正切值</p>
</li>
<li><p><code>Math.atan2(y,x)</code> : 返回<code>y</code>除以<code>x</code>的商的反正切值</p>
</li>
<li><p><code>Math.ceil(num)</code> : 返回大于<code>num</code>的最小整数</p>
</li>
<li><p><code>Math.cos(num)</code> : 返回<code>num</code>的余弦值</p>
</li>
<li><p><code>Math.exp(x)</code> : 返回以自然数为底,x次幂的数</p>
</li>
<li><p><code>Math.floor(num)</code> : 返回小于<code>num</code>的最大整数</p>
</li>
<li><p><code>Math.log(num)</code> : 返回<code>num</code>的自然对数</p>
</li>
<li><p><code>Math.max(num1,num2)</code> : 返回<code>num1</code>和<code>num2</code>中较大的一个</p>
</li>
<li><p><code>Math.min(num1,num2)</code> : 返回<code>num1</code>和<code>num2</code>中较小的一个</p>
</li>
<li><p><code>Math.pow(x,y)</code> : 返回<code>x</code>的<code>y</code>次方的值</p>
</li>
<li><p><code>Math.random()</code> : 返回<code>0</code>到<code>1</code>之间的一个随机数</p>
</li>
<li><p><code>Math.round(num)</code> : 返回<code>num</code>四舍五入后的值</p>
</li>
<li><p><code>Math.sin(num)</code> : 返回<code>num</code>的正弦值</p>
</li>
<li><p><code>Math.sqrt(num)</code> : 返回<code>num</code>的平方根</p>
</li>
<li><p><code>Math.tan(num)</code> : 返回<code>num</code>的正切值</p>
</li>
<li><p><code>Math.E</code> : 自然数(<code>2.718281828459045</code>)</p>
</li>
<li><p><code>Math.LN2</code> : <code>2</code>的自然对数(<code>0.6931471805599453</code>)</p>
</li>
<li><p><code>Math.LN10</code> : <code>10</code>的自然对数(<code>2.302585092994046</code>)</p>
</li>
<li><p><code>Math.LOG2E</code> : <code>log 2</code> 为底的自然数(<code>1.4426950408889634</code>)</p>
</li>
<li><p><code>Math.LOG10E</code> : <code>log 10</code> 为底的自然数(<code>0.4342944819032518</code>)</p>
</li>
<li><p><code>Math.PI</code> : <code>π(3.141592653589793)</code></p>
</li>
<li><p><code>Math.SQRT1_2</code> : <code>1/2</code>的平方根(<code>0.7071067811865476</code>)</p>
</li>
<li><p><code>Math.SQRT2</code> : <code>2</code>的平方根(<code>1.4142135623730951</code>)</p>
</li>
</ul>
<h5 id="Number型-常用的数字函数"><a href="#Number型-常用的数字函数" class="headerlink" title="Number型 常用的数字函数"></a>Number型 常用的数字函数</h5><hr>
<ul>
<li><strong>声明</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="keyword">new</span> <span class="built_in">Number</span>(<span class="number">1</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>字符串与数字间的转换</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = i.toString(); <span class="comment">//结果: “1”</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="keyword">new</span> <span class="built_in">String</span>(i); <span class="comment">//结果: “1”</span></span><br><span class="line"></span><br><span class="line">i = <span class="built_in">parseInt</span>(str); <span class="comment">//结果: 1</span></span><br><span class="line"></span><br><span class="line">i = <span class="built_in">parseFloat</span>(str); <span class="comment">//结果: 1.0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//注意: parseInt,parseFloat会把一个类似于”32G”的字符串,强制转换成32</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>判断是否为有效的数字</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">123</span>; <span class="keyword">var</span> str = “string”;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>( <span class="keyword">typeof</span> i == “number” )&#123; &#125; <span class="comment">//true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!</span></span><br><span class="line"></span><br><span class="line">i = <span class="built_in">parseInt</span>(str);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>( <span class="built_in">isNaN</span>(i) )&#123; &#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>数字型比较</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//此知识与[字符串比较]相同</span></span><br><span class="line"></span><br><span class="line">- **小数转整数**</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> f = <span class="number">1.5</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="built_in">Math</span>.round(f); <span class="comment">//结果:2 (四舍五入)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="built_in">Math</span>.ceil(f); <span class="comment">//结果:2 (返回大于f的最小整数)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="built_in">Math</span>.floor(f); <span class="comment">//结果:1 (返回小于f的最大整数)</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>格式化显示数字</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">3.14159</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//格式化为两位小数的浮点数</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = i.toFixed(<span class="number">2</span>); <span class="comment">//结果: “3.14”</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//格式化为五位数字的浮点数(从左到右五位数字,不够补零)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = i.toPrecision(<span class="number">5</span>); <span class="comment">//结果: “3.1415”</span></span><br></pre></td></tr></table></figure>
<ul>
<li><strong>X进制数字的转换</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="built_in">parseInt</span>(“<span class="number">0x1f</span>”,<span class="number">16</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="built_in">parseInt</span>(i,<span class="number">10</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="built_in">parseInt</span>(“<span class="number">11010011</span>”,<span class="number">2</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>随机数</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//返回0-1之间的任意小数</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> rnd = <span class="built_in">Math</span>.random();</span><br><span class="line"></span><br><span class="line"><span class="comment">//返回0-n之间的任意整数(不包括n)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> rnd = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * n)</span><br></pre></td></tr></table></figure>
<h5 id="5-Regex"><a href="#5-Regex" class="headerlink" title="5.Regex"></a>5.<code>Regex</code></h5><hr>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//在这个最大的对象的原型上加一个extends方法 使得下面所有的原型 都有这个方法</span></span><br><span class="line"> <span class="comment">//这个原型的作用是通过迭代 复制传进来的构造器的所有的原型的方法</span></span><br><span class="line"></span><br><span class="line"> <span class="built_in">Object</span>.prototype.extends = <span class="function"><span class="keyword">function</span>(<span class="params">parent</span>)</span>&#123;</span><br><span class="line">     <span class="comment">//console.log(parent.prototype);</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> prop <span class="keyword">in</span> parent.prototype)&#123;</span><br><span class="line">        <span class="comment">//console.log(prop);//eat extends</span></span><br><span class="line">        <span class="keyword">this</span>.prototype[prop] = parent.prototype[prop];<span class="comment">//复制传进来的构造器的所有的原型的方法给当前正在调用这个方法的对象</span></span><br><span class="line">    &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line"> &#125;</span><br><span class="line"> Person.prototype = &#123;</span><br><span class="line">    eat:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name+<span class="string">"在吃饭"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"> &#125;;</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> Father.extends(Person);<span class="comment">//extends方法是最大的对象Object加的方法 所有的子孙 构造器都有这个方法</span></span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> f = <span class="keyword">new</span> Father(<span class="string">"小头爸爸"</span>);</span><br><span class="line"> f.eat();</span><br></pre></td></tr></table></figure>
<h4 id="一些图示"><a href="#一些图示" class="headerlink" title="一些图示"></a><strong>一些图示</strong></h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-6828aabba7d2948e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-f4f9ade4c089cabd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt></p>
<ul>
<li>正则表达式扩展阅读<ul>
<li><a href="http://deerchao.net/tutorials/regex/regex.htm" target="_blank" rel="noopener">正则表达式30分钟入门教程</a></li>
<li><a href="http://blog.poetries.top/2016/07/09/%E6%A2%B3%E7%90%86%E5%B8%B8%E7%94%A8%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/">梳理常用的正则表达式</a></li>
</ul>
</li>
</ul>
<h3 id="第十一课时"><a href="#第十一课时" class="headerlink" title="第十一课时"></a>第十一课时</h3><hr>
<h4 id="上节回顾：-7"><a href="#上节回顾：-7" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li>1.<code>String</code></li>
<li>2.<code>Math</code>  <code>Math.random()</code></li>
</ul>
<h4 id="知识点：-10"><a href="#知识点：-10" class="headerlink" title="知识点："></a><strong>知识点：</strong></h4><hr>
<ul>
<li>1.<code>Date</code> 日期类</li>
<li>2.<code>Array</code></li>
<li>3.<code>Regex</code><ul>
<li>a.<code>[]</code>一个字符的范围</li>
<li>b.有顺序要求的</li>
<li>c.<code>\w==[a-zA-Z0-9_]</code>  <code>\d==[0-9]</code></li>
<li>d.<code>{count}</code>设置匹配数量比如<code>\w{5}</code></li>
<li>e.<code>//</code>的正则表达式匹配局部，<code>/^$/</code>的正则表达式是匹配全部</li>
<li>f.<code>()</code>的作用就是为了分组匹配</li>
</ul>
</li>
</ul>
<ul>
<li>简单封装一个对象案例</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">String</span>.prototype.isEmail = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  email = <span class="keyword">this</span>;</span><br><span class="line">  <span class="keyword">if</span> (email.indexOf(<span class="string">"@"</span>)!=<span class="number">-1</span>&amp;&amp;email.indexOf(<span class="string">"."</span>)!=<span class="number">-1</span>)</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="keyword">if</span>(email.indexOf(<span class="string">"@"</span>)&lt;email.lastIndexOf(<span class="string">"@"</span>))&#123;</span><br><span class="line">      alert(<span class="string">"邮箱不合法"</span>);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      alert(<span class="string">"邮箱合法"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> email = <span class="string">"jingguanliuye@gmail.com"</span>;</span><br><span class="line">email.isEmail();</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//===============================日历练习(方法简洁 高效)======================================</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//var year = parseInt(prompt("请输入日历年份："));</span></span><br><span class="line"><span class="comment">//var month = parseInt(prompt("请输入日历月份："))-1;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Date</span>.prototype.printCalendar = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> year = <span class="keyword">this</span>.getFullYear(),month = <span class="keyword">this</span>.getMonth();</span><br><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(year,month,<span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//alert(date.toLocaleString());</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;div class='date'&gt;"</span>+year+<span class="string">"年"</span>+(month+<span class="number">1</span>)+<span class="string">"月&lt;/div&gt;"</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"日 一 二 三 四 五 六&lt;br /&gt;"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> day = date.getDay();</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;day;i++)&#123;</span><br><span class="line">  <span class="built_in">document</span>.write(<span class="string">'  '</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> count = <span class="keyword">new</span> <span class="built_in">Date</span>(year,month+<span class="number">1</span>,<span class="number">0</span>).getDate();<span class="comment">//这里的0返回一个月的最后一天</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;=count;i++)&#123;</span><br><span class="line">  <span class="built_in">document</span>.write(i+<span class="string">'  '</span>);</span><br><span class="line">  <span class="keyword">if</span>((i+day)%<span class="number">7</span>==<span class="number">0</span>)&#123;</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">'&lt;br/&gt;'</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">2012</span>,<span class="number">2</span>).printCalendar();</span><br></pre></td></tr></table></figure>
<h3 id="第十二课时"><a href="#第十二课时" class="headerlink" title="第十二课时"></a>第十二课时</h3><hr>
<h4 id="上节回顾：-8"><a href="#上节回顾：-8" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li>1.<code>Date</code> 期类</li>
<li>2.<code>Array</code></li>
<li>3.<code>Regex</code><ul>
<li>a.<code>[]</code>一个字符的范围</li>
<li>b.有顺序要求的</li>
<li>c.<code>\w==[a-zA-Z0-9_]</code>  <code>\d==[0-9]</code></li>
<li>d.<code>{count}</code>设置匹配数量比如<code>\w{5}</code>，<code>{c1,c2}</code></li>
<li>e.<code>//</code>的正则表达式匹配局部，<code>/^$/</code>的正则表达式是匹配全部</li>
<li>f.<code>()</code>的作用就是为了分组匹配</li>
</ul>
</li>
</ul>
<h4 id="新知识点："><a href="#新知识点：" class="headerlink" title="新知识点："></a><strong>新知识点：</strong></h4><hr>
<ul>
<li>1.<code>Regex</code><ul>
<li>g.<code>+</code>代表的是<code>1-N</code>个，<code>*</code>代表的是<code>0-N</code>个</li>
<li>h.<code>?</code>代表该字符要不没有要不就有一个</li>
<li>i.<code>.</code>代表的是任意字符</li>
<li>j. <code>\转义符</code></li>
</ul>
</li>
<li>2.<code>BOM</code></li>
</ul>
<h3 id="第十三课时"><a href="#第十三课时" class="headerlink" title="第十三课时"></a>第十三课时</h3><hr>
<h4 id="上节回顾：-9"><a href="#上节回顾：-9" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li>1.Regex<ul>
<li>a.<code>[]</code>一个字符的范围</li>
<li>b.有顺序要求的</li>
<li>c.<code>\w==[a-zA-Z0-9_]</code>  <code>\d==[0-9]</code></li>
<li>d.<code>{count}</code>设置匹配数量比如<code>\w{5}</code>，<code>{c1,c2}</code></li>
<li>e.<code>//</code>的正则表达式匹配局部，<code>/^$/</code>的正则表达式是匹配全部</li>
<li>f.<code>()</code>的作用就是为了分组匹配</li>
<li>g.+代表的是<code>1-N</code>个，<code>*</code>代表的是<code>0-N</code>个</li>
<li>h.<code>?</code>代表该字符要不没有要不就有一个</li>
<li>i.<code>.</code>代表的是任意字符</li>
<li>j.<code>\转义符</code></li>
</ul>
</li>
</ul>
<h4 id="新知识："><a href="#新知识：" class="headerlink" title="新知识："></a><strong>新知识：</strong></h4><hr>
<ul>
<li><code>window</code> 是<code>Window</code>构造器造出来的一个对象 <code>alert(window instanceof Window)</code></li>
<li><code>document</code> 是<code>Document</code>构造器造出来的一个对象</li>
<li>任何对象在我们的内存中他都是由某个构造器创建出来的 也就是说 有构造器一定有对应的原型prototype</li>
<li>例如：<code>div</code>是由<code>HTMLDivElement</code> 这个构造器创建的一个实例 <code>div = new HTMLDivElement()</code>  <code>span = new HTMLSpanElement()</code></li>
<li>查看某个对象对应的构造器：<code>console.log();</code></li>
<li>整个浏览器的实现就是一个面向对象的编程思想 一切皆是对象</li>
</ul>
<h4 id="1-BOM-浏览器对象模型"><a href="#1-BOM-浏览器对象模型" class="headerlink" title="1.BOM 浏览器对象模型"></a>1.BOM 浏览器对象模型</h4><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-8b133694198ad13f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="BOM"></p>
<ul>
<li>a.<code>screen</code> 指的不是浏览器的宽度，指的是整个电脑屏幕的分辨率<ul>
<li>可以拿到屏幕可用分辨率</li>
</ul>
</li>
<li>b.<code>navigator</code><ul>
<li>可以通过<code>userAgent</code>判断当前浏览器信息</li>
</ul>
</li>
<li>c.<code>location</code><ul>
<li><code>URL</code>：统一资源定位符 <code>Union Resource Location</code></li>
<li>可以通过<code>href</code>属性重定向（改变）页面的URL，进行页面跳转</li>
</ul>
</li>
<li>d.<code>history</code><ul>
<li><code>go</code>方法能够让我们进行历史回退或者前进</li>
</ul>
</li>
<li><p>e.<code>frames</code></p>
<ul>
<li>获得当前窗体的子页面（<code>iframe</code>）</li>
</ul>
</li>
<li><p>f.<code>document</code></p>
<ul>
<li><code>DOM</code>模型的核心对象</li>
</ul>
</li>
</ul>
<h4 id="2-DOM-文档对象模型"><a href="#2-DOM-文档对象模型" class="headerlink" title="2.DOM 文档对象模型"></a>2.<code>DOM</code> 文档对象模型</h4><hr>
<ul>
<li><p><strong><code>document</code></strong></p>
<ul>
<li><strong>功能</strong><ul>
<li><code>getElementById</code>   <code>$(&#39;#aaa&#39;)</code></li>
<li><code>getElementByTagName</code>  <code>$(&#39;div&#39;)</code></li>
<li><code>getElementsByClassName</code>  <code>$(&#39;.aaa&#39;)</code></li>
<li><code>getElementsByName</code>  只用在表单元素中</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>document</code> <code>object</code></strong></p>
<ul>
<li><strong>属性：</strong><ul>
<li><code>className</code>，<code>style</code></li>
<li><code>id</code></li>
<li><code>name</code>,<code>value</code>(表单元素)</li>
<li><code>href</code>,<code>src</code>…(对应的元素)</li>
<li><code>innerHTML</code></li>
<li><code>children</code></li>
<li><code>parentNode</code></li>
</ul>
</li>
</ul>
<ul>
<li><strong>功能方法：</strong><ul>
<li><code>setAttribute/getAttribute</code></li>
<li><code>appendChild</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="第十四课时"><a href="#第十四课时" class="headerlink" title="第十四课时"></a>第十四课时</h3><hr>
<h4 id="上节回顾：-10"><a href="#上节回顾：-10" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<ul>
<li>1.BOM 浏览器对象模型<ul>
<li>a.<code>screen</code> 指的不是浏览器的宽度，指的是整个电脑屏幕的分辨率<ul>
<li>可以拿到屏幕可用分辨率</li>
</ul>
</li>
<li>b.<code>navigator</code><ul>
<li>可以通过<code>userAgent</code>判断当前浏览器信息</li>
</ul>
</li>
<li>c.<code>location</code><ul>
<li><code>URL</code>：统一资源定位符 <code>Union Resource Location</code></li>
<li>可以通过<code>href</code>属性重定向（改变）页面的URL，进行页面跳转</li>
</ul>
</li>
<li>d.<code>history</code><ul>
<li><code>go</code>方法能够让我们进行历史回退或者前进</li>
</ul>
</li>
<li>e.<code>frames</code><pre><code>获得当前窗体的子页面（`iframe`）
</code></pre></li>
<li>f.<code>document</code><ul>
<li><code>DOM</code>模型的核心对象</li>
</ul>
</li>
</ul>
</li>
<li>所有的<code>DOM</code>对象都是在堆内存创建的 都是有一个构造器生成的</li>
<li>查看对象的构造器器方法：<ul>
<li>step1：查看标签的对象以及构造器<code>var body = document.body;console.log(body.toString())</code></li>
<li>step2：查看对象是否是这个构造器创建出来的 <code>console.log(body instanceof HTMLBodyElement)</code></li>
</ul>
</li>
</ul>
<h4 id="新知识点：-1"><a href="#新知识点：-1" class="headerlink" title="新知识点："></a><strong>新知识点：</strong></h4><hr>
<h4 id="1-DOM-文档对象模型"><a href="#1-DOM-文档对象模型" class="headerlink" title="1.DOM 文档对象模型"></a>1.DOM 文档对象模型</h4><hr>
<h5 id="document"><a href="#document" class="headerlink" title="document"></a><strong>document</strong></h5><hr>
<ul>
<li>功能<ul>
<li><code>getElementById</code>：通过传入的ID，返回标识了这个ID的唯一对象的内存地址</li>
<li><code>getElementsByTagName</code>:通过传入的标签名字，返回所有该标签对象（<code>HTMLCollection</code>）</li>
<li><code>getElementsByClassName</code>:通过类的名字，返回所有该类的元素对象（<code>HTMLCollection</code>）</li>
<li><code>createElement</code>:想要创建出来的元素能够绘制在页面中，那么它必须在DOM树中<ul>
<li><strong>总结</strong> <code>document</code>对象是DOM原型的核心对象，它是内存DOM树的根，所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点（对象）</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="element"><a href="#element" class="headerlink" title="element"></a><strong><code>element</code></strong></h5><hr>
<ul>
<li><p>功能方法：（自定义属性非常灵活好用）</p>
<ul>
<li><code>setAttribute/getAttribute</code> //getAttribute获取标签的属性 –用来操作标签的属性</li>
<li><code>setAttribute</code>设置标签的属性</li>
<li><code>appendChild</code>:添加子元素</li>
</ul>
</li>
<li><p>属性：</p>
<ul>
<li><code>id</code></li>
<li><code>className</code>，<code>style</code></li>
<li><code>name</code>,<code>value</code>(只有表单元素有 其他是没有的)</li>
<li><code>href</code>,<code>src</code>…(对应的元素)</li>
<li><code>innerHTML/innerText</code>  <code>innerText</code>返回文本信息</li>
<li><code>children</code>://子元素集合</li>
<li><code>parentNode</code>//父元素</li>
</ul>
</li>
</ul>
<ul>
<li>总结：元素的功能属性直接可以通过元素对象<code>点</code>出来，除此意外的<code>自定义属性</code>，请通过<code>get/setAtribute</code>去操作</li>
</ul>
<h4 id="DOM-操作："><a href="#DOM-操作：" class="headerlink" title="DOM 操作："></a><strong>DOM 操作：</strong></h4><hr>
<ul>
<li>图片切换的相册效果</li>
<li><code>tab</code>切换效果</li>
<li>表单验证</li>
<li>特效就是<code>DOM</code>操作的具体应用 <code>DOM</code>操作就是用<code>js</code>来写<code>HTML</code>代码</li>
<li>节点/元素/标签：<ul>
<li>三种常用的节点类型：<ul>
<li>元素节点</li>
<li>属性节点</li>
<li>文本节点</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="操作DOM对象："><a href="#操作DOM对象：" class="headerlink" title="操作DOM对象："></a><strong>操作DOM对象：</strong></h4><hr>
<ul>
<li>修改：–找到这个节点</li>
<li>删除：–找到这个节点</li>
<li>添加：–先造出一个节点 然后插入 插入到哪里？找节点来定位</li>
<li>这些都离不开节点的查找</li>
</ul>
<h4 id="节点的查找：（最重要）"><a href="#节点的查找：（最重要）" class="headerlink" title="节点的查找：（最重要）"></a><strong>节点的查找：（最重要）</strong></h4><hr>
<ul>
<li>1、<code>document.getElementById</code>—根据<code>id</code>查找节点 [返回的是节点本身]</li>
<li>2、<code>document.getElementsByTagName</code>–根据标签名字来查找[返回的是数组]<code>document.getElementsByTagName[i]</code></li>
<li>3、<code>document.getElemenstByName</code>–根据<code>name</code>属性来查找节点（一般用在表单中）[返回的是数组]<code>document.getElemenstByName[i]</code></li>
</ul>
<ul>
<li><p><strong>注意：</strong>早期浏览器都认为<code>name</code>只出现在表单中 </p>
</li>
<li><p>因此<code>document.getElemenstByName</code>只对表单中的元素发挥作用 后来部分浏览器把<code>Name</code>属性扩展到一般的元素 如：<code>div</code> 但是IE浏览器还是只能对表单使用<code>byName</code>因此处于兼容性 我们只能对表单使用<code>byName</code></p>
</li>
</ul>
<h4 id="DOM中查找节点的思路：（由大到小-个别情况-由子到父）"><a href="#DOM中查找节点的思路：（由大到小-个别情况-由子到父）" class="headerlink" title="DOM中查找节点的思路：（由大到小 个别情况 由子到父）"></a><code>DOM</code>中查找节点的思路：（由大到小 个别情况 由子到父）</h4><hr>
<ul>
<li><p>由大到小：（通过下面的来定位）</p>
<ul>
<li>1、<code>document.getElementById</code>—根据id查找节点 [返回的是节点本身]</li>
<li>2、<code>document.getElementsByTagName</code>–根据标签名字来查找[返回的是数组]<code>document.getElementsByTagName[i]</code></li>
<li>3、<code>document.getElemenstByName</code>–根据<code>name</code>属性来查找节点（一般用在表单中）[返回的是数组]<code>document.getElemenstByName[i]</code></li>
</ul>
</li>
<li>如果还没有查到自己想要的节点，还可以继续根据上面已经找到的节点再次定位来查找</li>
<li>怎么继续定位？<ul>
<li>答：<code>childNodes/child</code></li>
</ul>
</li>
</ul>
<h4 id="继续查找："><a href="#继续查找：" class="headerlink" title="继续查找："></a><strong>继续查找：</strong></h4><ul>
<li>1、查找子元素 <code>children[index]/childNodes</code></li>
<li>2、查找父元素 <code>node.parentNode</code> –&gt;获取父元素</li>
<li>3、查找兄弟元素 <code>nextSibling</code> <code>previousSibling</code></li>
<li>4、<code>nextSibling</code> <code>previousSibling</code> <code>firstChild</code> <code>lastChild</code>这四个属性容易受到<code>空白文本</code>的影响 <code>建议不用</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//============给Object原型加一个方法 消除文本节点对DOM操作的影响 例如：nextSibling` `previousSibling` `firstChild` `lastChild （受到换行 和文本节点影响）</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.prototype.next = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">//NodeType == 3 text的代号</span></span><br><span class="line">  <span class="comment">//NodeType == 1 tag的代号</span></span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">this</span>.nextSibling)&#123;<span class="comment">//判断下一个兄弟节点是否存在</span></span><br><span class="line">  <span class="keyword">switch</span>(<span class="keyword">this</span>.nextSibling.nodeType)&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.nextSibling;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>.nextSibling.nextSibling;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(div1.next().next().innerText);</span><br></pre></td></tr></table></figure>
<ul>
<li><p>5、对于查到的某个元素里面的子元素非常多 这时候还可利用<code>getElementsByTagname</code>进一步筛选</p>
</li>
<li><p><strong>注意</strong> 对于元素对象和<code>document</code>对象相比 元素对象只能利用<code>getElementsByTagName</code>函数 其他两个不能用</p>
</li>
</ul>
<ul>
<li><p>节点查找也是通过由大到小来定位：找到大的元素进一步细化 完全可以找到页面上任意一个元素控制他</p>
</li>
<li><p>子元素 不好找 就找他的父元素</p>
</li>
<li><p>要过滤空白文本节点，用<code>children</code>取他的文本节点</p>
</li>
</ul>
<h4 id="DOM与节点的关系："><a href="#DOM与节点的关系：" class="headerlink" title="DOM与节点的关系："></a><strong>DOM与节点的关系：</strong></h4><hr>
<ul>
<li><strong>node:</strong><ul>
<li><code>childNodes[]</code></li>
<li><code>parentNode</code></li>
<li><code>firstChild</code></li>
<li><code>getElementsByTagName(&#39;元素标签&#39;)</code></li>
<li><code>lastchild</code></li>
<li><code>nextSibling</code></li>
<li><code>previousSibling</code></li>
<li><code>children[index]</code> <code>children</code> 不是<code>w3c</code>标准 但是各大浏览器兼容性很好</li>
</ul>
</li>
</ul>
<ul>
<li><p>通过给原型添加方法在元素后面创建标签</p>
</li>
<li><p><strong>启示</strong>：在项目中，很多很多地方都需要一个方法但是系统没提供，这时可以通过原型扩展</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//var p = document.createElement('p');</span></span><br><span class="line"><span class="comment">//p.innerHTML = "this is a p";</span></span><br><span class="line"><span class="comment">//var child = document.getElementsByTagName('div');</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//给Div的HTMLDivElement构造器原型加一个创建元素的方法 要所有的元素都有这个方法 改成 Object</span></span><br><span class="line">HTMLDivElement.prototype.createElement = <span class="function"><span class="keyword">function</span>(<span class="params">tagName</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> child = <span class="built_in">document</span>.createElement(tagName);</span><br><span class="line">  <span class="keyword">this</span>.appendChild(child);</span><br><span class="line">  <span class="keyword">return</span> child;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> child = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'div'</span>)[<span class="number">2</span>].createElement(<span class="string">"p"</span>);</span><br><span class="line">child.innerHTML = <span class="string">'pppppp'</span>;</span><br></pre></td></tr></table></figure>
<h5 id="DOM属性小结"><a href="#DOM属性小结" class="headerlink" title="DOM属性小结"></a><strong>DOM属性小结</strong></h5><hr>
<ul>
<li><p><code>Attributes</code>    存储节点的属性列表(只读)</p>
</li>
<li><p><code>childNodes</code>    存储节点的子节点列表(只读)</p>
</li>
<li><p><code>dataType</code>    返回此节点的数据类型</p>
</li>
<li><p><code>Definition</code>    以<code>DTD</code>或<code>XML</code>模式给出的节点的定义(只读)</p>
</li>
<li><p><code>Doctype</code>    指定文档类型节点(只读)</p>
</li>
<li><p><code>documentElement</code>    返回文档的根元素(可读写)</p>
</li>
<li><p><code>firstChild</code>    返回当前节点的第一个子节点(只读)</p>
</li>
<li><p><code>Implementation</code>    返回<code>XMLDOMImplementation</code>对象</p>
</li>
<li><p><code>lastChild</code>    返回当前节点最后一个子节点(只读)</p>
</li>
<li><p><code>nextSibling</code>    返回当前节点的下一个兄弟节点(只读)</p>
</li>
<li><p><code>nodeName</code>    返回节点的名字(只读)</p>
</li>
<li><p><code>nodeType</code>    返回节点的类型(只读)</p>
</li>
<li><p><code>nodeTypedValue</code>存储节点值(可读写)</p>
</li>
<li><p><code>nodeValue</code>    返回节点的文本(可读写)</p>
</li>
<li><p><code>ownerDocument</code>    返回包含此节点的根文档(只读)</p>
</li>
<li><p><code>parentNode</code>返回父节点(只读)</p>
</li>
<li><p><code>Parsed</code>    返回此节点及其子节点是否已经被解析(只读)</p>
</li>
<li><p><code>Prefix</code>    返回名称空间前缀(只读)</p>
</li>
<li><p><code>preserveWhiteSpace</code>    指定是否保留空白(可读写)</p>
</li>
<li><p><code>previousSibling</code>    返回此节点的前一个兄弟节点(只读)</p>
</li>
<li><p><code>Text</code>    返回此节点及其后代的文本内容(可读写)</p>
</li>
<li><p><code>url</code>返回最近载入的XML文档的<code>URL</code>(只读)</p>
</li>
<li><p><code>Xml</code>    返回节点及其后代的<code>XML</code>表示(只读)</p>
</li>
</ul>
<h5 id="DOM方法小结"><a href="#DOM方法小结" class="headerlink" title="DOM方法小结"></a>DOM方法小结</h5><hr>
<ul>
<li><code>cloneNode</code>    返回当前节点的拷贝</li>
<li><code>createAttribute</code>    创建新的属性</li>
</ul>
<ul>
<li><p><strong>节点操作<code>DOMDocument</code>属性和方法</strong></p>
<ul>
<li><p><code>createCDATASection</code>    创建包括给定数据的<code>CDATA</code>段</p>
</li>
<li><p><code>createComment</code>    创建一个注释节点</p>
</li>
<li><p><code>createDocumentFragment</code>    创建<code>DocumentFragment</code>对象</p>
</li>
<li><p><code>createElement_x_x</code>    创建一个元素节点</p>
</li>
<li><p><code>createEntityReference</code>    创建<code>EntityReference</code>对象</p>
</li>
<li><p><code>createNode</code>    创建给定类型,名字和命名空间的节点</p>
</li>
<li><p><code>createPorcessingInstruction</code>    创建操作指令节点</p>
</li>
<li><p><code>createTextNode</code>    创建包括给定数据的文本节点</p>
</li>
<li><p><code>getElementsByTagName</code>返回指定名字的元素集合</p>
</li>
<li><p><code>hasChildNodes</code>    返回当前节点是否有子节点</p>
</li>
<li><p><code>insertBefore</code>在指定节点前插入子节点</p>
</li>
<li><p><code>Load</code>导入指定位置的XML文档</p>
</li>
<li><p><code>loadXML</code>    导入指定字符串的XML文档</p>
</li>
<li><p><code>removeChild</code>    从子结点列表中删除指定的子节点</p>
</li>
<li><p><code>replaceChild</code>从子节点列表中替换指定的子节点</p>
</li>
<li><p><code>Save    把</code>XML`文件存到指定节点</p>
</li>
<li><p><code>selectNodes</code>    对节点进行指定的匹配,并返回匹配节点列表</p>
</li>
<li><p><code>selectSingleNode</code>    对节点进行指定的匹配,并返回第一个匹配节点</p>
</li>
<li><p><code>transformNode</code>    使用指定的样式表对节点及其后代进行转换</p>
</li>
<li><p><code>transformNodeToObject</code>    使用指定的样式表将节点及其后代转换为对象</p>
</li>
<li><p><code>document.documentElement</code>返回文档的根节点</p>
</li>
<li><p><code>document.activeElement</code>    返回当前文档中被击活的标签节点</p>
</li>
<li><p><code>event.fromElement</code>    返回鼠标移出的源节点</p>
</li>
<li><p><code>event.toElement</code>返回鼠标移入的源节点</p>
</li>
<li><p><code>event.srcElement</code>    返回激活事件的源节点</p>
</li>
<li><p><code>node.parentNode,node.parentElement</code>    返回父节点</p>
</li>
<li><p><code>node.childNodes</code>    返回子节点集合（包含文本节点及标签节点）</p>
</li>
<li><p><code>node.children</code>    返回子标签节点集合</p>
</li>
<li><p><code>node.textNodes</code>    返回子文本节点集合</p>
</li>
<li><p><code>node.firstChild</code>返回第一个子节点</p>
</li>
<li><p><code>node.lastChild</code>    返回最后一个子节点</p>
</li>
<li><p><code>node.nextSibling</code>返回同属下一个节点</p>
</li>
<li><p><code>node.previousSibling</code>    返回同属上一个节点</p>
</li>
<li><p><code>node.a(oNode)</code>    追加子节点：</p>
</li>
<li><p><code>node.applyElment(oNode,sWhere)</code></p>
</li>
<li><p><code>sWhere</code>有两个值：<code>outside</code> / i<code>nside</code>    应用标签节点</p>
</li>
<li><p><code>node.insertBefore()</code></p>
</li>
<li><p><code>node.insertAdjacentElement()</code></p>
</li>
<li><p><code>node.replaceAdjacentText()</code></p>
</li>
</ul>
</li>
<li><p><strong>插入节点</strong></p>
<ul>
<li><code>node.remove()</code></li>
<li><code>node.removeChild()</code></li>
<li><code>node.removeNode()</code></li>
</ul>
</li>
<li><p><strong>删除节点</strong></p>
<ul>
<li><code>node.replaceChild()</code></li>
<li><code>node.replaceNode()</code></li>
<li><code>node.swapNode()</code></li>
</ul>
</li>
<li><p><strong>替换节点</strong></p>
<ul>
<li><code>node.cloneNode(bAll)</code>返回复制复制节点引用</li>
<li><code>node.contains()</code>    是否有子节点</li>
<li><code>node.hasChildNodes()</code>是否有子节点</li>
</ul>
</li>
</ul>
<ul>
<li>扩展阅读<ul>
<li><a href="http://www.jianshu.com/p/1e638b7da640" target="_blank" rel="noopener">DOM编程之API总结篇</a></li>
</ul>
</li>
</ul>
<h3 id="第十五课时"><a href="#第十五课时" class="headerlink" title="第十五课时"></a>第十五课时</h3><hr>
<h4 id="上节回顾：-11"><a href="#上节回顾：-11" class="headerlink" title="上节回顾："></a><strong>上节回顾：</strong></h4><hr>
<h4 id="1-DOM-文档对象模型-1"><a href="#1-DOM-文档对象模型-1" class="headerlink" title="1.DOM 文档对象模型"></a>1.DOM 文档对象模型</h4><hr>
<h5 id="document-1"><a href="#document-1" class="headerlink" title="document"></a>document</h5><ul>
<li>功能<ul>
<li><code>getElementById</code>：通过传入的ID，返回标识了这个ID的唯一对象的内存地址</li>
<li><code>getElementsByTagName</code>:通过传入的标签名字，返回所有该标签对象（<code>HTMLCollection</code>）</li>
<li><code>getElementsByClassName</code>:通过类的名字，返回所有该类的元素对象（<code>HTMLCollection</code>）</li>
<li><code>createElement</code>:想要创建出来的元素能够绘制在页面中，那么它必须在DOM树中<ul>
<li>总结： <code>document</code>对象是DOM原型的核心对象，它是内存DOM树的根，所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点（对象）</li>
</ul>
</li>
</ul>
</li>
<li><code>element</code><ul>
<li>功能方法：（自定义属性非常灵活好用）<ul>
<li><code>setAttribute/getAttribute</code> //getAttribute获取标签的属性 –用来操作标签的属性</li>
<li><code>setAttribute</code>设置标签的属性</li>
<li><code>appendChild</code>:添加子元素</li>
</ul>
</li>
<li>属性：<ul>
<li><code>id</code></li>
<li><code>className</code>，<code>style</code></li>
<li><code>name</code>,<code>value</code>(只有表单元素有 其他是没有的)</li>
<li><code>href</code>,<code>src</code>…(对应的元素)</li>
<li><code>innerHTML/innerText</code>  innerText返回文本信息</li>
<li><code>children</code>://子元素集合</li>
<li><code>parentNode</code>//父元素</li>
<li>总结：元素的功能属性直接可以通过元素对象<code>点</code>出来，除此意外的<code>自定义属性</code>，请通过<code>get/setAtribute</code>去操作</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="新知识点：-2"><a href="#新知识点：-2" class="headerlink" title="新知识点："></a><strong>新知识点：</strong></h4><hr>
<h4 id="1-事件（事故）基础"><a href="#1-事件（事故）基础" class="headerlink" title="1.事件（事故）基础"></a>1.<strong>事件（事故）基础</strong></h4><hr>
<ul>
<li>白话含义：就是当一个事物遇到某个事情的时候，要做的事情<ul>
<li>（事件源）</li>
<li>（事件监听名称）</li>
<li>（事件处理程序）</li>
</ul>
</li>
</ul>
<h4 id="2-常用事件"><a href="#2-常用事件" class="headerlink" title="2.常用事件"></a>2.常用事件</h4><hr>
<ul>
<li><code>onclick:</code>当事件源被点击的时候调用处理程序</li>
<li><code>onmouseover:</code>鼠标进入事件</li>
<li><code>onmouseout:</code>鼠标移出事件</li>
<li><code>onmousedown:</code>鼠标按下去的时候</li>
<li><code>onmouseup:</code>鼠标抬起来的时候</li>
<li><code>onscroll:</code>当事件源滚动条滚动的时候</li>
<li><code>onkeydown:</code>当键盘按下的时候</li>
<li><code>onkeypress:</code>当键盘按下去的时候</li>
<li><code>onkeyup:</code>当键盘弹上来的时候</li>
<li><code>onfocus:</code>当事件源获得光标</li>
<li><code>onblur:</code>当事件源失去光标</li>
<li><code>onchange:</code>当事件源<code>blur</code>的时候内容改变了的话</li>
</ul>
<h4 id="浏览器事件注意事项："><a href="#浏览器事件注意事项：" class="headerlink" title="浏览器事件注意事项："></a><strong>浏览器事件注意事项：</strong></h4><hr>
<ul>
<li>1.以后我们不要把事件写在标签上,而使用<code>js</code>方式操作</li>
<li>2.js方式操作的话：<ul>
<li>非<code>IE</code>浏览器第一个对象就会传入<code>event</code>事件源对象</li>
<li>IE浏览器第一个对象就不会传入<code>event</code>事件源对象（<code>event = event||window.event</code>;）</li>
<li>非<code>IE</code>浏览器的事件源属性是<code>target</code>属性（<code>event.target = event.target||event.srcElement</code>;）</li>
<li><code>IE</code>浏6览器的事件源属性是<code>srcElement</code>属性</li>
</ul>
</li>
<li>3.事件冒泡机制</li>
</ul>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><hr>
<ul>
<li>以上是一些很基础的理论，笔记经验终究是别人的，看完了还是会忘记的，要转化成自己的东西，还要靠你不断实践。</li>
</ul>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-7848f738f43affba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="学编程最佳实践"></p>
<ul>
<li><code>JavaScript</code>读书路线</li>
</ul>
<p><img src="https://github.com/phodal/developer/raw/master/images/js.gif" alt="JavaScript读书路线--from phodal"></p>
<h3 id="js一些资料推荐"><a href="#js一些资料推荐" class="headerlink" title="js一些资料推荐"></a>js一些资料推荐</h3><hr>
<ul>
<li>视频<ul>
<li><a href="http://edu.51cto.com/course/course_id-166-page-1.html" target="_blank" rel="noopener">Javascript第一季初级视频教程【李炎恢老师】</a></li>
<li><a href="http://www.zhinengshe.com/video.html" target="_blank" rel="noopener">JavaScript视频教程 | 智能社</a></li>
</ul>
</li>
<li><p>了解<code>web</code>开发知识体系</p>
<ul>
<li><a href="https://github.com/phodal/growth" target="_blank" rel="noopener">Growth - 陪你成为顶尖开发者</a></li>
<li><a href="https://github.com/poetries/mywiki" target="_blank" rel="noopener">GitHub上收集整理的前端资源</a></li>
</ul>
</li>
<li><p>常用组件</p>
<ul>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6.md" target="_blank" rel="noopener">js常用组件整理</a></li>
</ul>
</li>
<li>扩展阅读<ul>
<li><a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000" target="_blank" rel="noopener">廖雪峰JavaScript基础教程</a></li>
<li><a href="https://github.com/stone0090/javascript-lessons" target="_blank" rel="noopener">JavaScript 闯关记</a></li>
<li><a href="http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html" target="_blank" rel="noopener">深入理解JavaScript系列 - 汤姆大叔</a></li>
<li><a href="http://bonsaiden.github.io/JavaScript-Garden/zh/" target="_blank" rel="noopener">JavaScript秘密花园</a></li>
</ul>
</li>
</ul>
<h3 id="附录一份大神总结的关于js的导图"><a href="#附录一份大神总结的关于js的导图" class="headerlink" title="附录一份大神总结的关于js的导图"></a>附录一份大神总结的关于js的导图</h3><hr>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-3a584567c41f737d.gif?imageMogr2/auto-orient/strip" alt="DOM基本操作"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-7de04acbf81543fc.gif?imageMogr2/auto-orient/strip" alt="javascript函数基础"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-5737bc8360e9e8d3.gif?imageMogr2/auto-orient/strip" alt="JavaScript数据类型"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-44d4ba1c8f6d48a6.gif?imageMogr2/auto-orient/strip" alt="window对象"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-05b7f79120cc6150.gif?imageMogr2/auto-orient/strip" alt="javascript变量"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-1b25cf62140a30fb.gif?imageMogr2/auto-orient/strip" alt="JavaScript字符串函数"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-30e2e0981d225fd4.gif?imageMogr2/auto-orient/strip" alt="JavaScript正则表达式"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-8bdb24d940eceeea.gif?imageMogr2/auto-orient/strip" alt="JavaScript流程控制"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-caa897f33ef0e47d.gif?imageMogr2/auto-orient/strip" alt="JavaScript运算符"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1480597-eb23ab7b14608e83.gif?imageMogr2/auto-orient/strip" alt="JavaScript数组"></p>
<ul>
<li><a href="https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/javascript%E7%AC%94%E8%AE%B0%E5%9F%BA%E7%A1%80%E6%80%BB%E7%BB%93%E7%AF%87.md" target="_blank" rel="noopener">本文mardown原文件–欢迎转载</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/09/22/DOM编程之API学习总结篇/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/10/19/HTML5+CSS3基础回顾 /">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
